/* /web/assets/css/user-styles.css */
/* FindAFitt Professional Stylesheet v3.6 - Card Text Contrast Fix */

/* --- FONT IMPORT --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap');

/* --- THEME DEFINITIONS USING CSS VARIABLES --- */
:root {
    /* Brand Colors */
    --faf-blue: #169B86;
    --faf-teal: #00A8BF;
    --faf-header-bg: #1A202C; /* Consistent Dark Header Background */

    /* Light Theme UI */
    --color-background: #F5F6F7;
    --color-surface: #FFFFFF;
    --color-text-primary: #16191B;
    --color-text-secondary: #59595B;
    --color-heading: var(--faf-blue);
    --color-link: var(--faf-teal);
    --color-link-hover: var(--faf-dark-gray);
    --color-border: #DEE2E6;
    --color-primary-action: var(--faf-blue);
    --color-primary-action-hover: #127A6B;
    --color-shadow: rgba(0, 0, 0, 0.05);

    /* Fonts */
    --font-primary: 'Open Sans', sans-serif;
    --font-headings: 'Montserrat', sans-serif;
}

html[data-theme='dark'] {
    /* Dark Theme UI */
    --color-background: #1A202C;
    --color-surface: #2D3748;
    --color-text-primary: #EDF2F7;
    --color-text-secondary: #A0AEC0;
    --color-heading: var(--faf-teal);
    --color-link: var(--faf-teal);
    --color-link-hover: #FFFFFF;
    --color-border: #4A5568;
    --color-primary-action: var(--faf-teal);
    --color-primary-action-hover: #00C0DA;
    --color-shadow: rgba(0, 0, 0, 0.2);
}

/* --- GLOBAL STYLES --- */
body {
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    padding-top: 120px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-heading);
    font-weight: 700;
}
a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease-in-out; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* --- UNIVERSAL HEADER --- */
.app-header {
    position: fixed; top: 0; left: 0;
    width: 100%;
    z-index: 1030;
    background-color: var(--faf-header-bg);
    padding: 0.5rem 0;
    height: 120px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.app-header .container-fluid {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-logo {
    height: 100px;
    width: auto;
}
#theme-toggle-btn {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.8);
}
#theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

/* --- AUTH CONTAINER & GENERAL CONTENT CARDS --- */
.auth-container, main .card {
    background-color: var(--color-surface);
    /* --- MODIFICATION START --- */
    /* Set the base text color for all card content to ensure readability */
    color: var(--color-text-primary);
    /* --- MODIFICATION END --- */
    box-shadow: 0 10px 25px var(--color-shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.auth-container {
    max-width: 450px;
    padding: 2.5rem;
    border-radius: 8px;
    border-top: 5px solid var(--color-primary-action);
    margin: 2rem auto;
}

/* --- FORMS & BUTTONS (Theme-Aware) --- */
.btn-primary {
    --bs-btn-bg: var(--color-primary-action);
    --bs-btn-hover-bg: var(--color-primary-action-hover);
    --bs-btn-border-color: var(--color-primary-action);
    --bs-btn-hover-border-color: var(--color-primary-action-hover);
    font-family: var(--font-headings);
    font-weight: 600;
}

/* Form Element Styling */
.auth-container .form-label,
main .card .form-label {
    color: var(--color-text-secondary);
    font-weight: 600;
}
.auth-container .form-control,
main .card .form-control {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
.auth-container .form-control:focus,
main .card .form-control:focus {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--faf-teal);
    box-shadow: 0 0 0 0.25rem rgba(0, 168, 191, 0.25);
}
.form-control::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 768px) {
    body {
        padding-top: 80px;
    }
    .app-header {
        height: 80px;
    }
    .header-logo {
        height: 60px;
    }
}

/* --- REPORT VIEWER --- */
.report-viewer {
    background-color: var(--color-surface);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 10px 25px var(--color-shadow);
}

.report-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

#report-iframe {
    width: 100%;
    height: 80vh; /* Use a significant portion of the viewport height */
    border: none;
    background-color: white; /* Set a default background while content loads */
}

/* --- REPORT VIEWER --- */
.report-viewer {
    background-color: var(--color-surface);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 10px 25px var(--color-shadow);
}

.report-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

/* MODIFICATION: More specific rule to ensure iframe is sized correctly */
.report-viewer #report-iframe {
    width: 100%;
    height: 80vh; 
    border: none;
    background-color: white; 
}

/* Avatar dropdown */
.user-menu { position: relative; display: inline-block; }
.avatar-button {
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: #fff; border-radius: 999px; padding: 6px; line-height: 0; cursor: pointer;
}
[data-theme="light"] .avatar-button { color: #111; border-color: rgba(0,0,0,0.15); }
.user-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; background: var(--menu-bg, #1f2937); color: #fff;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 6px; z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
[data-theme="light"] .user-menu-dropdown {
  background: #fff; color: #111; border-color: rgba(0,0,0,0.08); box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.user-menu-dropdown .menu-item {
  display: block; width: 100%; text-align: left; text-decoration: none; cursor: pointer;
  border: 0; background: transparent; color: inherit; padding: 10px 12px; border-radius: 8px;
}
.user-menu-dropdown .menu-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .user-menu-dropdown .menu-item:hover { background: rgba(0,0,0,0.06); }
.user-menu-dropdown .menu-item.danger { color: #ff7676; }

/* ── Lock user header bell + avatar colors regardless of theme ─────────── */
.app-header .header-actions .notification-bell,
.app-header .header-actions .notification-bell svg {
  color: #EDF2F7 !important; /* fixed light-on-dark */
}

.app-header .header-actions .avatar-button {
  color: #EDF2F7 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Keep the account dropdown dark-style in both themes */
.app-header .header-actions .user-menu-dropdown {
  background: #1f2937 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.app-header .header-actions .user-menu-dropdown .menu-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ── Lock user header bell + avatar colors (no theme flip) ───────────── */
.app-header .header-actions #notification-bell,
.app-header .header-actions #notification-bell svg,
.app-header .header-actions #notification-bell svg path,
.app-header .header-actions #notification-bell svg circle,
.app-header .header-actions #notification-bell svg rect {
  color: #EDF2F7 !important;   /* text/currentColor */
  fill:  #EDF2F7 !important;   /* actual icon paint */
}

.app-header .header-actions .avatar-button,
.app-header .header-actions .avatar-button svg {
  color: #EDF2F7 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Keep the account dropdown always dark-style */
.app-header .header-actions .user-menu-dropdown {
  background: #1f2937 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.app-header .header-actions .user-menu-dropdown .menu-item:hover {
  background: rgba(255,255,255,0.06) !important;
}