/* FFL Hub Custom Styles - Based on Children With Diabetes Brand Guidelines */

:root {
    /* Primary brand colors - from CWD Brand Guidelines (https://brand.cwdiabetes.org/) */
    --cwd-yellow: #f5ac1c;      /* CWD Yellow - PMS 1235 C */
    --cwd-teal: #5fa2b1;        /* CWD Teal - PMS 7696 C */
    --cwd-dark-gray: #292f36;   /* Dark Gray */
    --cwd-light-gray: #e5e6e6;  /* Light Gray */
    --cwd-off-white: #f7f5f4;   /* Off White */
    
    /* Friends for Life Secondary Colors */
    --ffl-green: #6cc72b;       /* FFL Green - PMS 802 C */
    --ffl-orange: #fc7815;      /* FFL Orange - PMS 1585 C */
    --ffl-gray: #9c9c9c;        /* FFL Gray */

    /* New Brand Identity Colors */
    --brand-blue: #004080;          /* Brand Blue for headers and text */
    --dark-gray: #333333;           /* Dark Gray for navigation text */
    --warm-off-white: #FDFBF7;      /* Warm off-white background */
    --cwd-orange-start: #F58025;    /* CWD Orange Gradient Start */
    --cwd-orange-end: #E05E12;      /* CWD Orange Gradient End */
    --donate-green: #7BC143;        /* Donate Green for positive actions */

    /* Application color scheme - Updated for new brand */
    --ffl-primary: var(--brand-blue);       /* Brand Blue for headers */
    --ffl-secondary: var(--cwd-yellow);     /* Accent color for highlights */
    --ffl-accent: var(--donate-green);      /* Donate Green for success states */
    --ffl-neutral: #6c757d;                 /* Professional grey for secondary text */
    --ffl-wellness: var(--cwd-teal);        /* Wellness and support theme */

    /* System colors */
    --ffl-success: var(--donate-green);  /* Donate Green */
    --ffl-warning: #ffc107;      /* Warning yellow */
    --ffl-danger: #dc3545;       /* Danger red */
    --ffl-light: var(--warm-off-white);   /* Warm off-white background */
    --ffl-dark: var(--dark-gray);         /* Dark Gray text */

    /* Typography - CWD Brand: Myriad Pro */
    --ffl-font-family: "myriad-pro", sans-serif;
    --ffl-heading-family: "myriad-pro", sans-serif;
    --ffl-heading-weight: 700;
    --ffl-body-weight: 400;
}

/* Typography */
body {
    font-family: var(--ffl-font-family);
    font-weight: var(--ffl-body-weight);
    color: var(--ffl-dark);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--warm-off-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ffl-heading-family);
    font-weight: var(--ffl-heading-weight);
    color: var(--brand-blue);
    line-height: 1.3;
}

/* Ensure proper contrast for accessibility */
.text-muted {
    color: #6c757d !important;
}

.navbar-brand {
    font-family: var(--ffl-heading-family) !important;
    font-weight: var(--ffl-heading-weight);
}

/* Navbar branding */
.navbar-brand img {
    height: 32px;
    margin-right: 10px;
}

.navbar-dark {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.navbar-dark .navbar-brand {
    color: var(--dark-gray) !important;
    font-weight: var(--ffl-heading-weight);
    font-size: 1.4rem;
    font-family: var(--ffl-font-family);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--dark-gray) !important;
    font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--brand-blue) !important;
    transition: color 0.2s ease;
}

.navbar-dark .navbar-toggler {
    border-color: var(--dark-gray);
}

.navbar-dark .navbar-toggler-icon {
    filter: invert(1);
}

/* Navbar light variant (new brand) */
.navbar-light {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.navbar-light .navbar-brand {
    color: var(--dark-gray) !important;
    font-weight: var(--ffl-heading-weight);
    font-size: 1.4rem;
    font-family: var(--ffl-font-family);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark-gray) !important;
    font-weight: 500;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--brand-blue) !important;
    transition: color 0.2s ease;
}

.navbar-light .navbar-toggler {
    border-color: var(--dark-gray);
}

/* Primary button styling - CWD Orange Gradient with Pill Shape */
.btn-primary {
    background: linear-gradient(90deg, var(--cwd-orange-start), var(--cwd-orange-end));
    border: none;
    font-weight: var(--ffl-heading-weight);
    color: white;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    background: linear-gradient(90deg, #e6721f, #c54f0e);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 128, 37, 0.3);
    color: white;
}

/* Secondary button - Outline style with Pill Shape */
.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--dark-gray);
    color: var(--dark-gray);
    font-weight: var(--ffl-heading-weight);
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray);
    color: white;
    transform: translateY(-1px);
}

/* Success button with Donate Green - Pill Shape */
.btn-success {
    background-color: var(--donate-green);
    border-color: var(--donate-green);
    font-weight: var(--ffl-heading-weight);
    color: white;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    transition: all 0.2s ease;
}

.btn-success:hover {
    background-color: #6ba93a;
    border-color: #6ba93a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(123, 193, 67, 0.3);
}

/* Card headers */
.card-header {
    background-color: white;
    border-bottom: none;
    font-weight: var(--ffl-heading-weight);
    color: var(--brand-blue);
    padding: 1.25rem;
}

.card-title {
    color: var(--brand-blue);
    font-weight: var(--ffl-heading-weight);
    margin-bottom: 0;
}

/* Card footer */
.card-footer {
    background-color: white;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1rem 1.25rem;
}

/* Badge colors - ensure proper Bootstrap badge styling */
.badge.bg-primary {
    background-color: var(--brand-blue) !important;
    color: white !important;
}

.badge.bg-secondary {
    background-color: var(--dark-gray) !important;
    color: white !important;
}

.badge.bg-success {
    background-color: var(--donate-green) !important;
    color: white !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
    color: var(--dark-gray) !important;
}

/* More specific selectors to override Bootstrap defaults */
.table .badge.bg-info,
td .badge.bg-info,
span.badge.bg-info {
    background-color: #0dcaf0 !important;
    color: var(--dark-gray) !important;
    display: inline-block !important;
}

.badge.bg-warning {
    background-color: var(--ffl-warning) !important;
    color: var(--dark-gray) !important;
}

.badge.bg-danger {
    background-color: var(--ffl-danger) !important;
    color: white !important;
}

/* Ensure all badges have consistent styling */
.badge {
    font-size: 0.75em !important;
    font-weight: 600 !important;
    padding: 0.35em 0.65em !important;
    border-radius: 0.375rem !important;
    letter-spacing: 0.025em;
}

/* Table styling for applications */
.table td {
    vertical-align: middle;
}

/* Match status badges in tables - ensure proper spacing and alignment */
.table .badge {
    white-space: nowrap;
    display: inline-block;
}

/* Webhook button styling */
.webhook-copy-btn {
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.webhook-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.webhook-action-btn {
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.webhook-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.webhook-code {
    background-color: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

/* Login page specific */
.login-logo {
    max-height: 80px;
    margin-bottom: 1rem;
}

/* Table styling */
.table-hover tbody tr:hover {
    background-color: rgba(0, 64, 128, 0.05);
}

.table th {
    background-color: var(--warm-off-white);
    color: var(--brand-blue);
    font-weight: var(--ffl-heading-weight);
    border-bottom: 2px solid rgba(0, 64, 128, 0.1);
}

/* Form controls */
.form-control:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 64, 128, 0.25);
}

.form-label {
    font-weight: 500;
    color: var(--brand-blue);
}

/* Login page styling */
.login-logo {
    max-width: 80px;
    height: auto;
    margin-bottom: 0.5rem;
}

.card {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    background-color: white;
}

.btn-outline-primary {
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    background-color: transparent;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    font-weight: var(--ffl-heading-weight);
    transition: all 0.2s ease;
}

.btn-outline-primary:hover {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: white;
    transform: translateY(-1px);
}

/* Traditional login toggle */
.traditional-login {
    display: none;
}

.traditional-login.show {
    display: block;
}

/* Footer styling */
.footer {
    background-color: white;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* Main content area should flex to fill available space */
main {
    flex: 1;
}

/* Booth list sorting */
.table th a {
    color: inherit;
    font-weight: 600;
}

.table th a:hover {
    color: var(--primary-color);
}

.footer h6 {
    color: var(--brand-blue);
    font-weight: var(--ffl-heading-weight);
}

.footer .text-muted {
    color: var(--ffl-neutral) !important;
}

/* Alert customizations */
.alert-info {
    background-color: rgba(0, 51, 102, 0.1);
    border-color: var(--ffl-primary);
    color: var(--ffl-primary);
}

/* User menu styling */
.user-menu {
    color: var(--dark-gray);
}

.user-menu:hover {
    color: var(--brand-blue);
    text-decoration: none;
}

/* Permission indicator */
.permission-badge {
    font-size: 0.75rem;
    background-color: var(--brand-blue) !important;
    color: white !important;
    font-weight: 500;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .navbar-brand img {
        height: 28px;
    }

    .navbar-brand {
        font-size: 1.2rem;
    }
}

/* Card emphasis for important sections */
.card-important {
    border-left: 4px solid var(--brand-blue);
    border-top: 1px solid rgba(0, 64, 128, 0.1);
}

.card-financial {
    border-left: 4px solid var(--cwd-orange-start);
    border-top: 1px solid rgba(245, 128, 37, 0.1);
}

.card-success {
    border-left: 4px solid var(--donate-green);
    border-top: 1px solid rgba(123, 193, 67, 0.1);
}

/* Breadcrumb styling */
.breadcrumb {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.breadcrumb-item a {
    color: var(--brand-blue);
    font-weight: 500;
}

.breadcrumb-item.active {
    color: var(--dark-gray);
}

/* Link styling */
a {
    color: var(--brand-blue);
    text-decoration: none;
}

a:hover {
    color: var(--cwd-orange-start);
    text-decoration: none;
}

/* Status indicators */
.status-active {
    color: var(--donate-green);
}

.status-pending {
    color: var(--cwd-orange-start);
}

.status-inactive {
    color: var(--ffl-neutral);
}

/* Medical/wellness theme accents */
.wellness-accent {
    border-left: 3px solid var(--ffl-wellness);
    padding-left: 15px;
}

.medical-badge {
    background: linear-gradient(45deg, var(--ffl-accent), var(--ffl-wellness));
    color: white;
    border: none;
}

.diabetes-support {
    border-left: 3px solid var(--cwd-purple);
    padding-left: 15px;
    background-color: rgba(123, 104, 238, 0.05);
}

/* Session Type Badges */
.badge.session-session {
    background-color: var(--donate-green);
    color: white;
}

.badge.session-meal {
    background-color: var(--ffl-warning);
    color: var(--dark-gray);
}

.badge.session-keynote {
    background-color: var(--brand-blue);
    color: white;
}

.badge.session-workshop {
    background-color: var(--cwd-teal);
    color: white;
}

.badge.session-social {
    background-color: var(--cwd-orange-start);
    color: white;
}

.badge.session-other {
    background-color: var(--ffl-neutral);
    color: white;
}

/* Target Audience Badges */
.badge.audience-adults {
    background-color: var(--brand-blue);
    color: white;
}

.badge.audience-youth {
    background-color: var(--cwd-teal);
    color: white;
}

.badge.audience-all {
    background-color: var(--donate-green);
    color: white;
}
/* Dashboard Stats Cards - New Brand Identity */
.stat-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.stat-card .stat-number {
    font-size: 2.5rem;
    font-weight: var(--ffl-heading-weight);
    color: var(--brand-blue);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dark-gray);
    font-weight: 500;
}

/* Compact stat card variant for dashboard sidebar */
.stat-card-compact {
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
}

.stat-card-compact .stat-number {
    font-size: 1.75rem;
}

.stat-card-compact .stat-label {
    font-size: 0.65rem;
}

/* Stat card link wrapper */
.stat-card-link {
    display: block;
    cursor: pointer;
}

.stat-card-link:hover .stat-card {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 64, 128, 0.15);
    border-color: var(--brand-blue);
}

.stat-card-link:hover .stat-number {
    color: var(--brand-green);
}

/* Pill-shaped buttons (for smaller buttons too) */
.btn-sm {
    border-radius: 50px;
}

/* Alert info for new brand */
.alert-info {
    background-color: rgba(0, 64, 128, 0.05);
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
    border-radius: 8px;
}

/* Dropdown menu styling */
.dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-item {
    color: var(--dark-gray);
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(0, 64, 128, 0.05);
    color: var(--brand-blue);
}