/* Reset and Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Poppins', sans-serif;
}

body,
body.font-sans {
    font-family: 'Poppins', sans-serif !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
}

/* Leaf Green Color Scheme + Modern design tokens */
:root {
    --leaf-green: #2e8b57;
    --leaf-green-light: #3cb371;
    --leaf-green-dark: #228b22;
    --leaf-green-accent: #32cd32;
    --cream: #f5f5f5;
    --light-beige: #faf8f5;
    --off-white: #f8f9fa;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 28px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.08);
    --transition: 0.2s ease;
}

/* Client notification unread count — not reliant on Tailwind generating bg-leaf-green */
.client-notification-badge {
    box-sizing: border-box;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    background-color: var(--leaf-green) !important;
    color: #fff !important;
    z-index: 2;
}
.client-notification-badge.client-notification-badge--bell {
    background-color: #dc2626 !important;
    color: #fff !important;
}
/* Parent nav links use text-leaf-green; keep badge text white */
.sticky-nav a .client-notification-badge,
#userMenu a .client-notification-badge,
#mobileMenu a .client-notification-badge,
.client-panel-sidebar a .client-notification-badge,
.dashboard-card nav a .client-notification-badge {
    color: #fff !important;
    background-color: var(--leaf-green) !important;
}
.sticky-nav a .client-notification-badge.client-notification-badge--bell,
#userMenu a .client-notification-badge.client-notification-badge--bell,
#mobileMenu a .client-notification-badge.client-notification-badge--bell,
.client-panel-sidebar a .client-notification-badge.client-notification-badge--bell {
    background-color: #dc2626 !important;
    color: #fff !important;
}

/*
 * Staff sidebar notification count pills — many pages set
 * html body .panel-sidebar.panel-sidebar nav a span { color: #fff !important; }
 * which overrides inline badge colors. Use span + modifier class so specificity beats nav a span.
 * On the notifications page, nav a.bg-white span { color: leaf-green } also applies — override
 * active badges with nav a.bg-white span.admin-notification-badge--nav-active (extra class).
 */
html body .panel-sidebar.panel-sidebar nav a span.admin-notification-badge--nav-inactive,
html body .panel-sidebar.panel-sidebar nav a span.frontdesk-notification-badge--nav-inactive {
    background-color: #fff !important;
    color: var(--leaf-green) !important;
}
html body .panel-sidebar.panel-sidebar nav a span.admin-notification-badge--nav-active,
html body .panel-sidebar.panel-sidebar nav a span.frontdesk-notification-badge--nav-active {
    background-color: var(--leaf-green) !important;
    color: #fff !important;
}
html body .panel-sidebar.panel-sidebar nav a.bg-white span.admin-notification-badge--nav-active,
html body .panel-sidebar.panel-sidebar nav a.bg-white span.frontdesk-notification-badge--nav-active {
    background-color: var(--leaf-green) !important;
    color: #fff !important;
}

/* Modern card refinements (Tailwind override when style.css is loaded) */
body .rounded-lg { border-radius: var(--radius-lg); }
body .shadow-md { box-shadow: var(--shadow-md); }
body .shadow-xl { box-shadow: var(--shadow-lg); }
#userMenu { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,0.06); }

/*
 * COLOR RULE: All sidebars in Admin panel and Front desk panel
 * Applies to: admin.php, admindailysales.php, adminaddingstaff.php, admincalendar.php,
 *             admininventory.php, adminlogbook.php, adminnotification.php, adminrecords.php,
 *             adminRTA.php, admintoclient.php, frontdesk.php, frontdeskdailysalessheet.php,
 *             frontdeskappointment.php, frontdeskcalendar.php, frontdeskrecords.php
 * Rule: Sidebar background = white. Default text = dark gray. Hover or active = light gray bg + leaf green text.
 *       Exception: Admin Daily Sales "Daily Sales" link = light leaf green tint + leaf green text.
 */
.panel-sidebar {
    background: #fff !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body .panel-sidebar h2,
body .panel-sidebar p,
body .panel-sidebar nav a,
body .panel-sidebar nav a span,
body .panel-sidebar nav a i,
body .panel-sidebar .sidebar-sub,
body .panel-sidebar [class*="text-gray"] { color: #374151 !important; }
body .panel-sidebar nav a:hover { background: #f3f4f6 !important; color: var(--leaf-green) !important; }
body .panel-sidebar nav a:hover span,
body .panel-sidebar nav a:hover i,
body .panel-sidebar nav a:hover * { color: var(--leaf-green) !important; }
body .panel-sidebar nav a.bg-white,
body .panel-sidebar nav a.bg-white\/25,
body .panel-sidebar nav a.font-semibold.bg-white { background: #f3f4f6 !important; color: var(--leaf-green) !important; }
body .panel-sidebar nav a.bg-white span,
body .panel-sidebar nav a.bg-white i,
body .panel-sidebar nav a.bg-white\/25 span,
body .panel-sidebar nav a.bg-white\/25 i,
body .panel-sidebar nav a.font-semibold.bg-white span,
body .panel-sidebar nav a.font-semibold.bg-white i { color: var(--leaf-green) !important; }
body .panel-sidebar nav a.text-leaf-green { color: var(--leaf-green) !important; }
body .panel-sidebar nav a.bg-white.text-leaf-green span,
body .panel-sidebar nav a.bg-white.text-leaf-green i { color: var(--leaf-green) !important; }
body .panel-sidebar .rounded-full.bg-leaf-green { background: #fff !important; border: 2px solid var(--leaf-green) !important; }
body .panel-sidebar .rounded-full.bg-leaf-green i { color: var(--leaf-green) !important; }
body .panel-sidebar nav a[style*="leaf-light"],
body .panel-sidebar nav a[style*="leaf-green"] { background: #f3f4f6 !important; color: var(--leaf-green) !important; }
body .panel-sidebar nav a.sidebar-active-dailysales { background: rgba(46,139,87,0.12) !important; color: var(--leaf-green) !important; }
body .panel-sidebar nav a.sidebar-active-dailysales span,
body .panel-sidebar nav a.sidebar-active-dailysales i { color: var(--leaf-green) !important; }

/* Higher-specificity override so sidebar rule wins on admin calendar, inventory, notification (Tailwind/page styles) */
html body .panel-sidebar.panel-sidebar { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; }
html body .panel-sidebar.panel-sidebar nav a,
html body .panel-sidebar.panel-sidebar nav a span,
html body .panel-sidebar.panel-sidebar nav a i { color: #374151 !important; }
html body .panel-sidebar.panel-sidebar nav a:hover { background: #f3f4f6 !important; color: var(--leaf-green) !important; }
html body .panel-sidebar.panel-sidebar nav a:hover span,
html body .panel-sidebar.panel-sidebar nav a:hover i,
html body .panel-sidebar.panel-sidebar nav a:hover * { color: var(--leaf-green) !important; }
html body .panel-sidebar.panel-sidebar nav a.bg-white,
html body .panel-sidebar.panel-sidebar nav a.bg-white\/25,
html body .panel-sidebar.panel-sidebar nav a.font-semibold.bg-white { background: #f3f4f6 !important; color: var(--leaf-green) !important; }
html body .panel-sidebar.panel-sidebar nav a.bg-white span,
html body .panel-sidebar.panel-sidebar nav a.bg-white i,
html body .panel-sidebar.panel-sidebar nav a.bg-white\/25 span,
html body .panel-sidebar.panel-sidebar nav a.bg-white\/25 i,
html body .panel-sidebar.panel-sidebar nav a.font-semibold.bg-white span,
html body .panel-sidebar.panel-sidebar nav a.font-semibold.bg-white i { color: var(--leaf-green) !important; }
html body .panel-sidebar.panel-sidebar nav a.text-leaf-green { color: var(--leaf-green) !important; }
html body .panel-sidebar.panel-sidebar nav a.bg-white.text-leaf-green span,
html body .panel-sidebar.panel-sidebar nav a.bg-white.text-leaf-green i { color: var(--leaf-green) !important; }

/* Navigation Bar */
.navbar {
    background: #fff;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 100;
    min-height: 80px;
}

.navbar-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.navbar-logo-wrapper:hover {
    transform: scale(1.02);
}

.navbar-logo-img {
    height: 55px;
    width: auto;
    object-fit: contain;
}

.navbar-logo-icon {
    width: 24px;
    height: 24px;
    color: #90EE90;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-logo-text {
    display: flex;
    flex-direction: column;
}

.navbar-logo-main {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif;
}

.navbar-logo-sub {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
    font-family: 'Poppins', sans-serif;
}

.navbar-menu {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-menu a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 6px;
}

.navbar-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #2e8b57;
    transition: width 0.3s ease;
}

.navbar-menu a:hover {
    color: #2e8b57;
}

.navbar-menu a:hover::after {
    width: 100%;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.book-btn {
    background: #2e8b57;
    color: #fff;
    padding: 12px 28px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(46, 139, 87, 0.3);
}

.book-btn:hover {
    background: #1e6b3e;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(46, 139, 87, 0.4);
}

.navbar-icon-wrapper {
    position: relative;
    cursor: pointer;
    color: #333;
    font-size: 22px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-icon-wrapper:hover {
    color: #2e8b57;
}

.navbar-icon {
    width: 26px;
    height: 26px;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
    color: #333;
}

.navbar-icon:hover {
    opacity: 1;
    transform: scale(1.1);
    color: #2e8b57;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    border: 2px solid white;
}

/* Container/sidebar stuck to nav: no gap (nav height = 14+70+14 = 98px) */
body:has(.sticky-nav) { padding-top: 98px !important; }
/* Maximize background image to full viewport, no space above – from very top */
body:has(.sticky-nav) { background-size: cover !important; background-position: center 0 !important; background-origin: padding-box !important; background-repeat: no-repeat !important; }
body > main,
body > div.dashboard-outer { padding-top: 0 !important; margin-top: 0 !important; }
body:has(.sticky-nav) .dashboard-container { padding-top: 1rem !important; background-size: cover !important; background-position: center top !important; }

/* Sticky Navigation Bar – same size as home.html */
.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    padding: 14px 0;
    transition: box-shadow var(--transition), padding var(--transition);
}

.sticky-nav-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sticky-nav-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sticky-logo {
    height: 70px;
}

.sticky-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

.sticky-nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sticky-nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 6px;
}

.sticky-nav-links a:hover {
    color: var(--leaf-green);
}

.sticky-nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--leaf-green);
    transition: width 0.3s ease;
}

.sticky-nav-links a:hover::after {
    width: 100%;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-icon {
    position: relative;
    color: #333;
    font-size: 20px;
    transition: color 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon:hover {
    color: var(--leaf-green);
}

/*
 * Client panel: Desktop = full nav + sidebar. Mobile = only logo + burger (no nav links, no sidebar).
 */
.mobile-menu-btn { display: none; }
/* Desktop: full nav + sidebar; burger hidden */
@media (min-width: 1025px) {
    .sticky-nav .nav-icons button.mobile-menu-btn,
    .sticky-nav .nav-icons .nav-icon.mobile-menu-btn,
    .sticky-nav .mobile-menu-btn,
    .nav-icon.mobile-menu-btn,
    .mobile-menu-btn { display: none !important; }
}
/* Mobile/tablet: hide entire nav bar content and sidebar; show only logo + burger */
@media (max-width: 1024px) {
    /* Hide all top nav links (Home, About, Services, Contact Us, FAQs) */
    body .sticky-nav .sticky-nav-links,
    body .sticky-nav-left .sticky-nav-links,
    .sticky-nav .sticky-nav-links,
    .sticky-nav-left .sticky-nav-links { display: none !important; }
    .sticky-logo { height: 52px; }
    .sticky-nav-container { padding: 0 14px; }
    .sticky-book-btn { display: none !important; }
    .nav-icons > a { display: none !important; }
    .nav-icons > div { display: none !important; }
    .mobile-menu-btn { display: flex !important; }
    /* Hide left sidebar (user card, Dashboard, Appointments, History, Notifications, Profile, Logout, mini calendar) */
    body .client-panel-sidebar,
    body .dashboard-outer .client-panel-sidebar,
    body .dashboard-container .client-panel-sidebar,
    .client-panel-sidebar,
    .dashboard-outer .client-panel-sidebar,
    .dashboard-container .client-panel-sidebar { display: none !important; }
    .client-panel-content { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
}

.nav-icon a,
a.nav-icon {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon .notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border: 2px solid white;
}

.sticky-book-btn {
    background: linear-gradient(135deg, var(--leaf-green), var(--leaf-green-dark));
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(46, 139, 87, 0.3);
}

.sticky-book-btn:hover {
    background: linear-gradient(135deg, var(--leaf-green-dark), #1e6b3e);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(46, 139, 87, 0.4);
}

/* Split Screen Auth Layout — sits flush below fixed .sticky-nav (body padding-top 98px); no extra margin */
.auth-container {
    display: flex;
    min-height: calc(100vh - 98px);
    position: relative;
    flex: 1;
    margin-top: 0;
}

.auth-left {
    flex: 1;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.8s ease;
}

.auth-left.login-bg {
    background-image: url('login.jpg');
}

.auth-left.register-bg {
    background-image: url('register.jpg');
}

.auth-left.verify-bg {
    background-image: url('bg-1.png');
}

.auth-left.login-bg {
    background-image: url('login.jpg');
}

.auth-left.register-bg {
    background-image: url('register.jpg');
}

.auth-left.verify-bg {
    background-image: url('bg-1.png');
}

.auth-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(46, 139, 87, 0.3) 0%, rgba(30, 107, 62, 0.2) 100%);
}

.auth-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 40px;
    animation: slideIn 0.6s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Auth (Login / Register / Verify) Layout */
.auth-wrapper {
    width: 100%;
    max-width: 500px;
}

.auth-card {
    background: #ffffff;
    border-radius: var(--radius-2xl);
    padding: 48px 44px;
    box-shadow: var(--shadow-xl);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.auth-title {
    text-align: left;
    margin-bottom: 8px;
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.5px;
}

.auth-subtitle {
    text-align: left;
    margin-bottom: 35px;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

.auth-form .form-group {
    margin-bottom: 24px;
    position: relative;
}

.auth-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #333;
    letter-spacing: 0.3px;
}

.auth-input {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    transition: border-color var(--transition), box-shadow var(--transition);
    background: #fafafa;
    color: #111827;
}

.auth-input:focus {
    border-color: var(--leaf-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15);
    background: #fff;
}

.auth-input::placeholder {
    color: #999;
    font-weight: 400;
}

/* Input wrapper for icons */
.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 18px;
    pointer-events: none;
    transition: color 0.3s ease;
}

.input-wrapper .auth-input {
    padding-left: 30px;
}

.input-wrapper .auth-input:focus + .input-icon {
    color: #2e8b57;
}

/* OTP Input Special Styling */
.otp-input {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 8px;
    padding: 16px 0;
    border-bottom: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.otp-input:focus {
    border-bottom-color: #2e8b57;
    letter-spacing: 12px;
}

/* Password visibility toggle */
.password-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    transition: color 0.3s ease;
}

.password-toggle:hover {
    color: #2e8b57;
}

/* One eye icon only: hide the browser’s built-in password reveal (Edge/IE + Chromium),
   which otherwise stacks next to our custom .password-toggle button. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    width: 0;
    margin: 0;
}

.input-wrapper:has(.password-toggle) .auth-input {
    padding-right: 48px;
}

.auth-btn {
    width: 100%;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    border: none;
    background: linear-gradient(135deg, var(--leaf-green) 0%, var(--leaf-green-dark) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    margin-top: 12px;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(46, 139, 87, 0.25);
}

.auth-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.auth-btn:hover::before {
    width: 300px;
    height: 300px;
}

.auth-btn:hover {
    background: #1e6b3e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 139, 87, 0.3);
}

.auth-btn:active {
    transform: translateY(0);
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 30px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2e8b57;
}

.remember-me label {
    cursor: pointer;
    color: #666;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

.forgot-password {
    color: #2e8b57;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.forgot-password:hover {
    text-decoration: underline;
    color: #1e6b3e;
}

.auth-error {
    background: #fff5f5;
    color: #c53030;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
    border-left: 4px solid #c53030;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: shake 0.5s ease;
}

.auth-success {
    background: #f0fdf4;
    color: #166534;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
    border-left: 4px solid #2f855a;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideDown 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 1.5rem;
    margin-top: 28px;
    text-align: center;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    color: #6b7280;
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
}

.auth-footer a {
    color: #2e8b57;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.auth-footer a:hover {
    color: #1e6b3e;
    text-decoration: underline;
}

.auth-footer--spread {
    justify-content: space-between;
    width: 100%;
    text-align: left;
}

/* Info message for OTP */
.otp-info {
    background: #e6f3ff;
    color: #0066cc;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
    border-left: 4px solid #0066cc;
}

/* Common Components */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #4A6FA5;
    color: white;
}

.btn-primary:hover {
    background: #3a5985;
    transform: translateY(-2px);
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.close-modal {
    float: right;
    font-size: 28px;
    cursor: pointer;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

/* Dashboard Cards */
.dashboard-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Loading Spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #4A6FA5;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Footer (matching home.html / home.php) */
footer {
    background: linear-gradient(135deg, #2e8b57 0%, #228b22 100%);
    color: white;
    padding: 30px 20px 15px;
    font-family: 'Poppins', sans-serif;
    margin-top: auto;
}

/* Client panel footer uses a different gradient direction */
.client-panel-footer {
    background: linear-gradient(135deg, #2e8b57 0%, #228b22 100%) !important;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 25px;
}

.footer-left-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.footer-right-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 12px;
}

.footer-logo {
    max-width: 180px;
    margin-bottom: 8px;
}

.footer-logo img {
    width: 100%;
    height: auto;
}

.footer-section h3,
.navigate-section h3 {
    font-size: 17px;
    margin-bottom: 12px;
    color: #fff;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.tagline {
    font-style: italic;
    margin-bottom: 8px;
    color: #b8e6c8;
    text-align: right;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

.social-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    justify-content: flex-end;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--leaf-green);
    color: white;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
}

.social-icon:hover {
    background-color: var(--leaf-green-dark);
    transform: translateY(-2px);
}

.footer-links-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-links-column a {
    color: #d0f0e0;
    text-decoration: none;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s;
    display: block;
    margin-bottom: 3px;
}

.footer-links-column a:hover {
    color: var(--leaf-green-light);
}

/* Current page in main nav (hero / page-hero) and mobile drawer */
.hero-menu a[aria-current="page"],
.page-hero .hero-menu a[aria-current="page"] {
    font-weight: 600;
    opacity: 1;
}

.hero-menu a[aria-current="page"]::after,
.page-hero .hero-menu a[aria-current="page"]::after {
    width: 100%;
}

.mobile-drawer a[aria-current="page"] {
    font-weight: 600;
    background: rgba(46, 139, 87, 0.14);
    color: var(--leaf-green);
}

.navigate-section,
.menu-section {
    flex: 1;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.copyright p {
    font-size: 11px;
    color: #90EE90;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.footer-bottom-links {
    display: flex;
    gap: 15px;
}

.footer-bottom-links a {
    color: #90EE90;
    text-decoration: none;
    font-size: 11px;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s;
}

.footer-bottom-links a:hover {
    color: var(--leaf-green-light);
}

/* Responsive Design */
@media (max-width: 768px) {
    .auth-container {
        flex-direction: column;
    }
    
    .auth-left {
        min-height: 200px;
    }
    
    .auth-right {
        padding: 20px;
    }
    
    .auth-card {
        padding: 30px 20px;
    }
    
    .auth-title {
        font-size: 28px;
    }
    
    .navbar {
        padding: 12px 20px;
        flex-wrap: wrap;
    }
    
    .navbar-menu {
        display: none;
    }
    
    .navbar-actions {
        gap: 10px;
    }

    /* Footer — mobile: two columns (Navigate | logo/social), legal row centered */
    footer {
        padding: 30px 20px 15px;
    }
    .footer-content {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px 20px;
    }
    .footer-left-section {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
    .footer-right-section {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        align-items: flex-end;
        text-align: right;
    }
    .footer-right-section .tagline {
        text-align: right;
    }
    .social-icons {
        justify-content: flex-end;
    }
    .footer-logo img {
        max-width: min(160px, 100%);
    }
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        align-items: center;
    }
    .copyright {
        width: 100%;
    }
    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 10px;
    }

    /* Modals: viewable on mobile (portrait/landscape) – full viewport, scrollable */
    .modal {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 10px;
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-content {
        margin: 10px auto 24px;
        max-width: calc(100% - 20px) !important;
        width: 100% !important;
        max-height: none;
        overflow-y: visible;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Horizontal scroll inside modal bodies (Bootstrap/custom) */
    .modal-body,
    #detailsModalBody {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Appointment/details style modals */
    .modal-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep client appointment/details modal columns horizontal on mobile.
       Without min-width, the grid columns become extremely narrow and content wraps
       in a way that looks like a vertical layout. */
    #detailsModal .modal-two-cols {
        grid-template-columns: 1fr 1fr;
        min-width: 560px;
    }
    #detailsModal .modal-col {
        min-width: 260px;
    }

    /* If a table/row is wider than the modal, allow scrolling */
    .modal-content table,
    .modal-box table,
    .modal-body table,
    #detailsModalBody table {
        width: max-content;
        min-width: 100%;
    }
    /* Fixed overlay modals (e.g. booking, time-slot) */
    [class*="modal-overlay"].is-open,
    [class*="-overlay"].is-open {
        align-items: flex-start;
        padding: 8px;
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    [class*="modal-overlay"] [class*="-modal"]:not([class*="modal-overlay"]),
    [class*="-overlay"] > [class*="-modal"],
    [class*="-overlay"] > [class*="-card"] {
        max-width: calc(100% - 16px) !important;
        width: 100% !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 8px auto 24px !important;
    }
    .time-slot-modal-overlay.is-open { padding: 12px; }
    .time-slot-modal-overlay .time-slot-modal {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
    }
    .booking-confirm-overlay .booking-confirm-card {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    /* Tables: horizontal scroll on mobile so tables stay viewable (portrait/landscape) */
    .table-responsive,
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto !important;
    }
    .table-responsive table,
    .overflow-x-auto table {
        min-width: 280px;
    }
    main .overflow-x-auto,
    main [class*="overflow-x-auto"],
    .container .overflow-x-auto {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}