/* ═══════════════════════════════════════════════════════════════════════
   ALINE ADMIN - SHARED FOUNDATION STYLES
   ═══════════════════════════════════════════════════════════════════════

   This file contains the shared CSS foundation that's used across
   the entire application - fonts, colors, and global variables.

   Page-specific and feature-specific styles are organized in the
   modular CSS files in the /modules directory.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   CUSTOM FONTS

   Loading our brand fonts: PrettyWise (body text) and Champagne (headings)
   ───────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'PrettyWise';
  src: url('/fonts/Prettywise-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PrettyWise';
  src: url('/fonts/Prettywise-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Champagne';
  src: url('/fonts/Champagne & Limousines.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Champagne';
  src: url('/fonts/Champagne & Limousines Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Champagne';
  src: url('/fonts/Champagne & Limousines Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ─────────────────────────────────────────────────────────────────────
   GLOBAL COLOR PALETTE & VARIABLES

   These colors and variables are used throughout the entire application.
   Update them here to change the look and feel everywhere at once.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Brand Colors */
  --color-background: #e6e7cf;    /* Warm cream page background */
  --color-text: #4F4F42;          /* Dark text color */
  --color-text-hover: #3a3a2f;    /* Darker hover state */

  /* Earth-Tone Palette - Sanctuary Aesthetic */
  --color-sage: #A4A98A;          /* Secondary accent color */
  --color-olive: #8B9076;         /* Primary accent & action color */
  --color-border-earthy: #C4BFB3; /* Soft border color */
  --color-card-background: #F9F8F6; /* Card/container background */

  /* Typography */
  --font-pretty: 'PrettyWise', 'Montserrat', sans-serif;
  --font-champagne: 'Champagne', 'Cormorant Garamond', serif;
}


/* ─────────────────────────────────────────────────────────────────────
   GLOBAL HTML & BODY STYLES

   Core sizing, box model, and base typography that applies everywhere
   ───────────────────────────────────────────────────────────────────── */

html {
  font-size: 14px;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: var(--font-pretty);
  margin-bottom: 60px;
}

@media (min-width: 1024px) {
  body {
    margin-bottom: 0;
  }
}

main {
    width: 100%;
}


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE LAYOUT HELPERS

   Show/hide elements based on screen size for mobile vs desktop layouts
   ───────────────────────────────────────────────────────────────────── */

/* Hide on desktop, show on mobile/tablet */
.mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-only {
    display: none !important;
  }
}

/* Hide on mobile/tablet, show on desktop */
.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   DESKTOP SIDEBAR & LAYOUT

   Fixed sidebar on the left for desktop screens (1024px and up)
   ───────────────────────────────────────────────────────────────────── */

.desktop-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  body {
    display: flex;
  }

  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 100vh;
    background: white;
    border-right: 1px solid var(--color-border-earthy);
    z-index: 100;
    padding: 2rem 0;
    overflow-y: auto;
  }

  .sidebar-header {
    padding: 0 1.5rem 2rem;
    border-bottom: 1px solid var(--color-border-earthy);
    margin-bottom: 1rem;
  }

  .sidebar-logo {
    font-family: var(--font-champagne);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    margin: 0 0.5rem;
  }

  .sidebar-nav-item:hover {
    background-color: rgba(79, 79, 66, 0.05);
    border-left-color: var(--color-olive);
  }

  .sidebar-nav-item svg {
    width: 20px;
    height: 20px;
    color: var(--color-olive);
  }

  .sidebar-nav-item span {
    font-family: var(--font-champagne);
    font-weight: 600;
    font-size: 0.95rem;
  }

  .main-content {
    flex: 1;
    width: 100%;
    min-height: 100vh;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   MAIN CONTENT WRAPPER

   Used on every page to ensure consistent content area sizing
   ───────────────────────────────────────────────────────────────────── */

.main-content {
  flex: 1;
  width: 100%;
}


/* ─────────────────────────────────────────────────────────────────────
   FONT UTILITY CLASSES

   Quick text styling helpers - use these to quickly apply font styles
   ───────────────────────────────────────────────────────────────────── */

.font-champagne-regular {
  font-family: var(--font-champagne);
  font-weight: 400;
}

.font-champagne-bold {
  font-family: var(--font-champagne);
  font-weight: 700;
}

.font-champagne-italic {
  font-family: var(--font-champagne);
  font-weight: 400;
  font-style: italic;
}



/* ═══════════════════════════════════════════════════════════════════════
   AUTHENTICATION & LOGIN PAGE

   Creates an elegant, welcoming login experience with a split-screen design.
   On desktop, users see a beautiful image alongside the login form. On mobile
   and tablets, we focus entirely on the login form for simplicity. The design
   balances professionalism with approachability, making users feel comfortable
   while maintaining security.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   LOGIN PAGE CONTAINER

   Centers the login card vertically and horizontally on the page with a
   subtle background pattern. The semi-transparent pattern adds visual
   interest without competing with the login form for attention.
   ───────────────────────────────────────────────────────────────────── */

.login-page {
    min-height: 100vh;
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    position: relative;
}

    .login-page::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0.1;
        background-image: url('/images/auth/path.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }

/* ─────────────────────────────────────────────────────────────────────
   LOGIN CARD STRUCTURE

   The main login card has a subtle shadow offset that creates depth and
   draws attention to the login area. The rounded corners soften the design
   while the white background provides a clean canvas for the form.
   ───────────────────────────────────────────────────────────────────── */

.login-container {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    width: 100%;
    border: 1px solid black;
    border-radius: 1rem;
    background: white;
}

.login-card {
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.08) 8px 8px 2px;
    display: flex;
    min-height: 600px;
}

/* ─────────────────────────────────────────────────────────────────────
   FORM SIDE

   The left side contains all the interactive elements. We center everything
   both horizontally and vertically for a balanced, welcoming layout. The
   max-width keeps the form from becoming too wide, maintaining comfortable
   line lengths for reading.
   ───────────────────────────────────────────────────────────────────── */

.login-form-side {
    flex: 1;
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form-content {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────
   LOGO & BRANDING

   The brand logo uses generous letter spacing for an elegant, upscale feel.
   This sets the tone for the entire login experience, communicating quality
   and professionalism before users even interact with the form.
   ───────────────────────────────────────────────────────────────────── */

.login-logo {
    margin-bottom: 3rem;
    font-family: var(--font-champagne);
    text-align: center;
}

    .login-logo h1 {
        font-size: 3rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        color: var(--color-text);
        margin-bottom: 0.5rem;
    }

    .login-logo p {
        font-size: 0.875rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-text);
        margin: 0;
    }

/* ─────────────────────────────────────────────────────────────────────
   TITLES & SUBTITLES

   Clear, friendly headings explain what users need to do. The subtitle
   often includes helpful links like "Create an account" to guide new users.
   ───────────────────────────────────────────────────────────────────── */

.login-title {
    font-size: 1.75rem;
    font-family: var(--font-champagne);
    color: var(--color-text);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.login-subtitle {
    font-size: 1.25rem;
    font-family: var(--font-champagne);
    color: #666;
    margin-bottom: 2rem;
    font-weight: 400;
}

    .login-subtitle a {
        color: var(--color-text);
        text-decoration: underline;
        font-weight: 500;
        transition: color 0.2s ease;
    }

        .login-subtitle a:hover {
            color: var(--color-olive);
        }

/* ─────────────────────────────────────────────────────────────────────
   SOCIAL LOGIN BUTTONS

   Large, comfortable buttons for social authentication (like Google Sign-In).
   The pill shape and icon-text layout make these buttons highly recognizable
   and easy to tap on any device. We use italic text to add a bit of style
   personality to these important CTAs.
   ───────────────────────────────────────────────────────────────────── */

.google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border: 1px solid black;
    border-radius: 9999px;
    background-color: white;
    color: black;
    font-size: 1.25rem;
    font-family: var(--font-champagne);
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-bottom: 1.5rem;
}

    .google-btn:hover {
        background-color: #f8f9fa;
    }

    .google-btn:active {
        background-color: #e9ecef;
    }

    .google-btn svg {
        width: 2rem;
        height: 2rem;
        margin-right: 0.75rem;
        flex-shrink: 0;
    }

    .google-btn span {
        flex: 1;
        font-style: italic;
    }

/* ─────────────────────────────────────────────────────────────────────
   DIVIDER

   The "OR" divider elegantly separates different login methods. The line
   extends across the form with the text sitting on top, making it clear
   that users have multiple options for signing in.
   ───────────────────────────────────────────────────────────────────── */

.divider {
    position: relative;
    margin: 1.5rem 0;
    text-align: center;
}

    .divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background-color: black;
    }

    .divider span {
        position: relative;
        display: inline-block;
        background-color: white;
        padding: 0 1rem;
        font-size: 1.875rem;
        font-family: var(--font-champagne);
        color: #6c757d;
    }

/* ─────────────────────────────────────────────────────────────────────
   PRIMARY ACTION BUTTON

   The main login/continue button uses our brand color and italic styling
   to match the visual language established by the social buttons. The
   slight scale effect on click provides satisfying tactile feedback.
   ───────────────────────────────────────────────────────────────────── */

.email-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border: 1px solid black;
    border-radius: 9999px;
    background-color: var(--color-text);
    color: black;
    font-size: 1.25rem;
    font-family: var(--font-champagne);
    font-style: italic;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

    .email-btn:hover {
        background-color: var(--color-text-hover);
        color: white;
    }

    .email-btn:active {
        transform: scale(0.98);
    }

/* ─────────────────────────────────────────────────────────────────────
   IMAGE SIDE (DESKTOP ONLY)

   On larger screens (992px+), we show a decorative image on the right side
   of the login card. This creates a more immersive, welcoming experience
   while providing visual balance. The gradient background ensures the image
   looks good even while loading.
   ───────────────────────────────────────────────────────────────────── */

.login-image-side {
    flex: 1;
    background: linear-gradient(to bottom right, #f8f6f0, #e8e6d8);
    position: relative;
    display: none;
    overflow: hidden;
}

    .login-image-side img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE DESIGN

   The login experience adapts beautifully across all device sizes:

   - Large screens (992px+): Split layout with image and form side-by-side
   - Medium screens (768-991px): Form only, full width, comfortable padding
   - Small screens (<768px): Compact layout optimized for mobile devices
   - Tiny screens (<480px): Minimal padding, smaller text for very small phones

   This ensures the login page looks great and functions well everywhere.
   ───────────────────────────────────────────────────────────────────── */

/* Tablet (>= 992px): Show image side */
@media (min-width: 992px) {
    .login-image-side {
        display: block;
    }

    .login-form-side {
        padding: 4rem 3rem;
    }
}

/* Tablet (768px - 991px): Single column, no image */
@media (max-width: 991px) {
    .login-card {
        min-height: auto;
    }

    .login-form-side {
        padding: 2.5rem 2rem;
    }
}

/* Mobile (< 768px): Full width, compact */
@media (max-width: 767px) {
    .login-page {
        padding: 1.5rem 1rem;
    }

    .login-container {
        border: none;
        box-shadow: none;
    }

    .login-card {
        border-radius: 0.75rem;
        box-shadow: none;
        min-height: auto;
    }

    .login-form-side {
        padding: 2rem 1.5rem;
    }

    .login-form-content {
        max-width: 100%;
    }

    .login-logo h1 {
        font-size: 2.5rem;
    }

    .login-logo p {
        font-size: 0.75rem;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .login-subtitle {
        font-size: 1.125rem;
        margin-bottom: 1.5rem;
    }

    .google-btn,
    .email-btn {
        font-size: 1.125rem;
        padding: 0.625rem 1.25rem;
    }

        .google-btn svg {
            width: 1.75rem;
            height: 1.75rem;
            margin-right: 0.5rem;
        }

    .divider {
        margin: 1.25rem 0;
    }

        .divider span {
            font-size: 1.5rem;
            padding: 0 0.75rem;
        }

    .email-btn {
        margin-top: 0.75rem;
    }
}

/* Extra small mobile (< 480px): Minimal spacing */
@media (max-width: 479px) {
    .login-page {
        padding: 1rem;
    }

    .login-logo h1 {
        font-size: 2rem;
    }

    .login-form-side {
        padding: 1.5rem 1rem;
    }

    .login-title {
        font-size: 1.25rem;
    }

    .login-subtitle {
        font-size: 1rem;
    }

    .google-btn,
    .email-btn {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
}