@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* saas_boilerplate/assets/app.css */

/* --- Reset --- */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    /* Prevent horizontal scrolling on mobile when scaled-down desktop layout is wider
       than viewport. Vertical scrolling remains enabled. */
    overflow-x: hidden;
    /* Ensure browser gestures (pinch-zoom, pan) are allowed */
    touch-action: auto !important;
}

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

/* --- CSS Variables --- */
/* Define base theme colors and styles here.
   Many correspond to constants in layouts/themes.py for use in Python code.
   Modify these variables to change the overall look and feel. */
:root {
    /* Backgrounds & Borders (linked to themes.py BACKGROUND_*, BORDER_COLOR) */
    --body-bg: #f7fbff;
    --content-bg: #ffffff;
    --border-color: #dee2e6;

    /* Text & Fonts (linked to themes.py TEXT_*, FONT_*) */
    --text-color: #212529;
    --text-muted: #6c757d;
    --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Primary Color Palette (linked to themes.py COLOR_*) */
    --primary-color: #0d6efd; /* Base primary color */
    /* Subtle gradients for CTAs */
    --accent-gradient-start: #5c7cfa; /* Indigo-ish */
    --accent-gradient-end: #4dabf7;   /* Sky blue */
    --success-gradient-start: #20c997; /* Teal */
    --success-gradient-end: #12b886;
    /* ... other base colors if needed ... */

    /* Component Specific */
    --badge-completed-bg: #e9ecef;
    --badge-completed-text: #495057;

    /* New variable for section borders */
    --section-border-color: #99ccff;

    /* Button Colors (linked to themes.py BUTTON_*) */
    --btn-primary-bg: var(--primary-color); /* Example: Use primary color */
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #6c757d; /* Standard Bootstrap Gray */
    --btn-secondary-text: #ffffff;
    --btn-light-gray-bg: #e2e6ea; /* Lighter gray for specific buttons (e.g., login) */
    --btn-light-gray-text: #212529; /* Dark text for light gray button */
    --btn-google-bg: #4285F4; /* Google Blue */
    --btn-google-text: #ffffff;

}

/* --- Global Styles --- */
body {
    background-color: var(--body-bg);
    font-family: var(--font-family-sans-serif);
    color: var(--text-color);
    line-height: 1.6;
    width: 100%;
    touch-action: auto !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600; /* Slightly bolder headings */
    margin-bottom: 1rem;
}

/* --- Component Styling --- */

/* Page Container - Ensure background color applies */
#page-container {
    background-color: var(--body-bg);
    min-height: 100vh;
    padding-top: 0rem; /* Add some top padding */
    padding-bottom: 0rem; /* Add bottom padding */
    width: 100%;
}

/* Content Card/Area Styling */
.content-section {
    background-color: var(--content-bg);
    border-radius: 0.375rem; /* Standard Bootstrap border radius */
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle shadow */
}

/* Buttons */
.btn-outline-secondary {
    /* Style for View Options / Filters buttons */
    border-color: var(--border-color);
    color: var(--text-muted);
}
.btn-outline-secondary:hover {
    background-color: #f8f9fa; /* Light hover */
    color: var(--text-color);
}
.btn i { /* Style for icons within buttons */
    margin-right: 0.5em;
}

/* Custom Button Styles */
.btn-light-gray {
    color: var(--btn-light-gray-text);
    background-color: var(--btn-light-gray-bg);
    border-color: var(--btn-light-gray-bg);
}
.btn-light-gray:hover {
    color: var(--btn-light-gray-text);
    background-color: #d3d8db; /* Slightly darker gray on hover */
    border-color: #cbd0d3;
}

.btn-google {
    color: var(--btn-google-text);
    background-color: var(--btn-google-bg);
    border-color: var(--btn-google-bg);
}

.btn-google:hover {
    color: var(--btn-google-text);
    background-color: #357ae8; /* Slightly darker Google blue on hover */
    border-color: #2a6dd9;
}

/* Ensure custom button text color is applied */
.btn-google,
.btn-light-gray {
    /* Ensure text color isn't overridden by default Bootstrap styles */
    color: var(--btn-google-text), var(--btn-light-gray-text);
}

/* Search Input */
.search-input .form-control {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.search-input .input-group-text {
    background-color: var(--content-bg);
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: var(--text-muted);
}

/* Table Styling */
.table {
    margin-bottom: 0; /* Remove default bottom margin if inside a card */
}

.table thead th {
    background-color: #f8f9fa; /* Light gray header */
    border-bottom: 2px solid var(--border-color);
    font-weight: 500; /* Medium weight for headers */
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.table tbody tr {
    border-bottom: 1px solid var(--border-color); /* Row separator */
}
.table tbody tr:last-child {
    border-bottom: none; /* No border on last row */
}

.table tbody td {
    vertical-align: middle; /* Align cell content vertically */
    padding: 0.9rem 0.75rem; /* Adjust padding */
}

/* Progress Bar */
.progress {
    height: 0.75rem; /* Slightly thicker progress bar */
    background-color: #e9ecef; /* Background track */
}

/* Badges (Status) */
.badge.status-badge {
    padding: 0.4em 0.7em;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge.bg-completed { /* Custom class for 'Completed' style */
    background-color: var(--badge-completed-bg) !important; /* Override default */
    color: var(--badge-completed-text) !important;
}
/* Add other status badge styles here if needed (e.g., Active, Pending) */
.badge.bg-active {
    background-color: #cfe2ff !important; /* Bootstrap primary light */
    color: #0a58ca !important; /* Bootstrap primary dark */
}
.badge.bg-pending {
     background-color: #fff3cd !important; /* Bootstrap warning light */
     color: #664d03 !important; /* Bootstrap warning dark */
}

/* Priority Text */
.priority-high {
    font-weight: 700;
    color: #dc3545; /* Example: Red for high */
}
.priority-medium {
    font-weight: 600;
    color: #ffc107; /* Example: Yellow for medium */
}
.priority-low {
    font-weight: 500;
    color: #198754; /* Example: Green for low */
}

/* General Layout Adjustments */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.page-title {
    margin-bottom: 0; /* Remove bottom margin if in flex container */
}

.header-controls {
    display: flex;
    gap: 0.75rem; /* Space between buttons/inputs */
    flex-wrap: wrap; /* Allow wrapping */
}

/* Adjust default Card component */
.card {
     border: 1px solid var(--border-color);
     box-shadow: none; /* Use content-section shadow instead if preferred */
}

/* Flashed messages alignment */
#flashed-messages-container .alert {
    margin-top: 1rem;
    margin-bottom: 0; /* Remove bottom margin if container adds padding */
}

/* Removed fixed width for main content container to allow fluid behavior */

/* Style for disabled primary buttons to make them gray */
.btn-primary:disabled,
.btn-primary[disabled] { /* Target both attribute notations */
  background-color: #cccccc; /* Light gray background */
  border-color: #cccccc;   /* Matching border */
  color: #6c757d;         /* Standard Bootstrap muted text color */
  opacity: 0.65;           /* Keep Bootstrap default opacity */
}

/* Make tabs more compact */
.compact-tabs .dash-tab,
.compact-tabs .tab {
  padding: 2px 8px;
  line-height: 0.8;
  text-transform: uppercase;
  font-weight: 650; /* Increased weight for stronger emphasis */
  letter-spacing: 0.08em; /* Slightly wider spacing */
  font-size: 1.0rem; /* Slightly larger text for readability */
}

/* Custom styles for dbc.Input */
.custom-input {
    border-radius: 20px; /* More rounded corners */
}

/* --- AG Grid Metric Column Borders --- */
/* Add faint gray borders between metric columns for better visual separation */
.ag-theme-alpine .metric-column-border {
    border-right: 1px solid #e2e0e0 !important;
}

/* Ensure the border doesn't interfere with cell content */
.ag-theme-alpine .metric-column-border .ag-cell-wrapper {
    padding-right: 8px;
}

/* --- AG Grid Ranking Metric Header Styling --- */
/* Make the ranking metric header bold and visually distinct */
.ag-theme-alpine .ranking-metric-header {
    font-weight: bold !important;
    color: #009708 !important; /* Use primary blue color */
    background-color: #f8f9fa !important; /* Light background */
}

.ag-theme-alpine .ranking-metric-header .ag-header-cell-text {
    font-weight: bold !important;
    color: #0d6efd !important;
}

/* --- AG Grid Header Enhancement --- */
/* Make all AG Grid headers more prominent */

/* The text itself */
.ag-theme-alpine .ag-header-cell-text {
    text-transform: uppercase !important;
    font-size: 0.850rem !important; /* Slightly larger than default */
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: #495057 !important; /* Darker gray for better contrast */
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: visible !important; /* Allow text to be visible even if container is small */
}

/* The cell itself, not the text */
.ag-theme-alpine .ag-header-cell {
    background-color: #f8f9fa !important; /* Light gray background */
    border-bottom: 2px solid #dee2e6 !important; /* Stronger bottom border */
    overflow: visible !important; /* Allow content to overflow if needed */
}

/* Ensure the header label container doesn't constrain text */
.ag-theme-alpine .ag-header-cell-label {
    overflow: visible !important;
    min-width: 0; /* Remove any minimum width constraints */
}

/* Ensure ranking metric header keeps its special color */
.ag-theme-alpine .ranking-metric-header .ag-header-cell-text {
    font-weight: 800 !important; /* Even bolder for ranking metric */
    color: #009708 !important; /* Keep the green color */
}

/* --- New Controls Section Styles --- */

/* This is the main controls container */
.controls-card-gradient {
    /* Soft diagonal gradient for the entire controls area */
    background: linear-gradient(57deg, #ffffff 0%, #f1f9ff 100%);
    border-radius: 1rem;
    border-color: var(--section-border-color);
    border-width: 2px;
    border-style: solid;
    
}

/* Ensure gradient shows inside all nested elements */
.controls-card-gradient .card-body,
.controls-card-gradient .tab-content,
.controls-card-gradient .tab-pane {
    background-color: transparent;
}

/* --- Label styling inside controls card --- */
.controls-card-gradient label,
.controls-card-gradient .form-check-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 450;
    font-size: 0.8rem; /* Slightly smaller as they are uppercase */
}
/* Keep hint small text normal case */
.controls-card-gradient label small,
.controls-card-gradient .form-check-label small {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.75rem;
}

/* Visual zones: subtle panels inside tabs */
.visual-zone {
    /* background-color: rgba(255, 255, 255, 0.95); Slightly tinted white */
    background: linear-gradient(135deg, #ffffff 0%, #f2f8fd 100%);
    border: 2px solid #f2f8fd;
    border-radius: 0.5rem;
    padding: 0.75rem; /* Internal padding */
}

/* --- Modern Tabs Styles --- */
.modern-tabs .nav-tabs {
    border-bottom: none;
    gap: 0.4rem;
    position: relative; /* enable absolute bar positioning */
}

.modern-tabs .nav-item .nav-link {
    position: relative;
    border: none;
    border-radius: 0.85rem 0.85rem 0 0; /* rounded top only */
    padding: 0.35rem 1.1rem;
    /* Subtle 3-D effect for inactive pills */
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(220, 234, 254, 0.9) 50%, rgba(196, 217, 249, 0.9) 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), /* top highlight */
                inset 0 -1px 2px rgba(0,0,0,0.05),    /* bottom inner shadow */
                0 1px 2px rgba(0,0,0,0.06);          /* outer soft shadow */
    color: var(--text-muted);
    font-weight: 600;
    transition: all 0.25s ease;
}

.modern-tabs .nav-link:hover {
    color: var(--primary-color);
    background: rgba(13,110,253,0.15);
}

.modern-tabs .nav-link.active {
    color: #fff;
    /* Richer gradient + shadow for active pill */
    background: linear-gradient(180deg, #3b8dff 0%, #0d6efd 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), /* glossy top edge */
                0 3px 6px rgba(13,110,253,0.25);
}

/* Tab bar underline */
.modern-tabs-wrapper { position: relative; }
.tab-bar {
    position: absolute;
    top: 0; /* will be updated via JS */
    height: 3px;
    width: 60px;
    background: var(--primary-color);
    border-radius: 3px;
    transition: left .3s ease, width .3s ease;
}

/* Fade animation for tab content */
.modern-tabs .tab-pane {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}
.modern-tabs .tab-pane.active.show {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive scroll for nav-tabs */
@media (max-width: 575px){
    .modern-tabs .nav-tabs{
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .modern-tabs .nav-tabs::-webkit-scrollbar{display:none;}
}

/* --- Status Container Styles --- */
.status-container-gradient {
    /* Very light and subtle gradient - much lighter than controls */
    background: linear-gradient(135deg, #ffffff 0%, #e7f1fb 100%);
    border: 1px solid #bfdfff;
    border-radius: 0.75rem 0.75rem 0 0; /* Rounded top corners only */
    border-bottom: 0px solid #dee2e6; /* Match AG Grid border color */
    padding: 0.5rem 1rem 0.0rem 1rem; /* Reduced padding: top right bottom left */
    margin-bottom: 0; /* No margin - sits flush with grid */
}

/* Ensure the container content is properly aligned */
.status-container-gradient .row {
    margin: 0; /* Remove default row margins */
}

/* Fine-tune the border to connect seamlessly with AG Grid */
.status-container-gradient + div .ag-theme-alpine {
    border-top: none; /* Remove top border of grid to avoid double border */
}

/* Make the transition smooth where container meets grid */
.status-container-gradient {
    position: relative;
    z-index: 1; /* Ensure it sits above grid slightly for clean border connection */
}

/* --- Futuristic Modal Fade-In Animation (1s) --- */
/* These rules override Bootstrap's default .15s fade so that every dbc.Modal
   (which renders as .modal) now fades and subtly zooms from the background
   in one smooth second.  No Python changes are required – the Bootstrap
   classes (fade / show) are already toggled by Dash.
*/
.modal.fade .modal-dialog {
    /* Start fully transparent, a bit smaller, and slightly above */
    opacity: 0;
    transform: scale(0.94) translateY(-20px);
    /* Longer, smoother transition with a futuristic cubic-bezier easing */
    transition: opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When the modal gains the .show class, animate to full size & opacity */
.modal.fade.show .modal-dialog {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Backdrop fade duration extended to match modal */
.modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.modal-backdrop.fade.show {
    opacity: 0.2; /* Slightly higher than Bootstrap default for a sleeker look */
}

/* --- Darker backdrop specifically for the intro modal --- */
.modal-backdrop.intro-modal-backdrop.show {
    opacity: 0.6 !important; /* Use !important to override the general rule */
}

/* --- NEW Tip Component Styles --- */
.tip-container-top {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes left and right containers apart */
    padding: 0.75rem 1.5rem;
    margin-bottom: 0.4rem;
    border-radius: 1rem;
    background: linear-gradient(0deg, #f0f5fc 0%, #f8f9fa 100%);
    border: 1px solid #dce8f8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tip-content-container {
    display: flex;
    align-items: center;
}

.tip-bulb-icon {
    font-size: 1.2rem;
    color: #ffc107;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.7);
    margin-right: 1rem;
}

.tip-arrow-container {
    display: flex;
    align-items: center;
}

.tip-text {
    font-size: 1.0rem;
    font-weight: 400;
    color: #495057; /* Darker, more readable text */
}

.tip-arrow {
    font-size: 1rem; /* Larger icon size */
    color: #cdcdcd; /* Muted color for arrows */
    cursor: pointer;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
    padding: 0 0.25rem; /* Padding around each arrow */
}

.tip-arrow:hover {
    color: #0d6efd; /* Highlight color on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
}
/* --- END Tip Component Styles --- */

/* --- Intro Modal Carousel Styles --- */
.intro-modal-style {
    width: 75vw !important;   /* Desired width */
    max-width: 75vw !important;  /* Override Bootstrap's 500px max */
    margin: 2vh auto !important;
    transition: none !important;
    transform-origin: top center; /* Allow external script to scale modal if needed */
}

.intro-modal-style .modal-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
}

.intro-modal-style .modal-body {
    padding: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Ensure proper flex layout for modal body content */
.intro-modal-style .modal-body > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.carousel-container {
    position: relative;
    width: 100%;
    padding-top: 58.60%; /* Maintain 353:205 aspect ratio */
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    flex-shrink: 1; /* Allow container to shrink if needed */
    margin-top: 0; /* Ensure no top margin pushing navigation up */
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0; /* Updated by callback style */
    width: 100%;
    height: 100%;
    transition: left 0.2s ease-in-out;
    display: flex; /* Changed back to flex for centering */
    align-items: center;
    justify-content: center;
    padding: 15px; /* Add breathing room around images */
    box-sizing: border-box; /* Include padding in dimensions */
}

/* Style the images within carousel slides */
.carousel-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px; /* Slight rounding for softer edges */
}

.carousel-navigation {
    width: 100%;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0);
    /* border-radius: 8px; */
    padding: 10px 20px;
    position: relative;
    z-index: 10;
    flex-shrink: 0; /* Prevent navigation from shrinking */
}

/* Prevent mobile auto text zoom when we force desktop scaling */
html, body {
    -webkit-text-size-adjust: 100% !important; /* iOS/Safari */
}

/* Mobile-only guidance modal tweaks */
.mobile-only-modal .modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    width: 100%;
    max-width: 100%;
}
.mobile-only-modal .modal-content {
    border-radius: 0;
    border: none;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-only-modal .modal-body {
    padding: 40px 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Override any competing modal z-index to ensure mobile modal is on top */
.mobile-only-modal {
    z-index: 1060 !important;
}
.modal-backdrop.show + .mobile-only-modal {
    z-index: 1061 !important;
}

/* Style for the navigation buttons container */
.carousel-navigation .d-flex {
    background: none !important;
    padding: 0;
    margin-left: 20px; /* Add left padding to move buttons away from edge */
    gap: 0.75rem !important; /* Increase gap between prev/next buttons */
}

/* Make prev/next buttons larger */
#intro-prev-button,
#intro-next-button {
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    position: relative;
}

/* Center the icons within the buttons */
#intro-prev-button i,
#intro-next-button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

/* Fine-tune positioning for each icon */
#intro-prev-button i {
    transform: translate(-48%, -50%); /* Slightly adjust left icon */
}

#intro-next-button i {
    transform: translate(-52%, -50%); /* Slightly adjust right icon */
}

.carousel-indicators {
    padding: 0 20px;
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: none !important;
    position: relative !important; /* Ensure it stays in document flow */
    margin: 0 !important; /* Remove any default margins */
}

.carousel-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.4;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.carousel-indicator:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.carousel-indicator.active {
    opacity: 1;
    background-color: #0d6efd;
    transform: scale(1.3);
}

/* Improved button visibility */
.carousel-navigation .btn {
    color: #333 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Better hover state */
.carousel-navigation .btn:hover:not(:disabled) {
    background-color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Active/pressed state */
.carousel-navigation .btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.carousel-navigation .btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* X close button styling */
#intro-modal-close-button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1.0;
    padding: 0 !important;
    /* transition: all 0.2s ease; */
}

/* Remove all focus states and outlines */
#intro-modal-close-button:focus,
#intro-modal-close-button:active,
#intro-modal-close-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* Hover state for X button */
#intro-modal-close-button:hover {
    color: #dc3545 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- GENERAL STYLES for app --- */
/* (This comment helps separate sections) */

/* ---- Pricing Page Enhancements ---- */
.tier-card {
    border: 1px solid rgba(13,110,253,0.25) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 6px 16px rgba(13,110,253,0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden; /* fix white top-corner gaps by clipping header background */
}
.tier-card:hover {
    transform: none; /* remove hover lift */
    box-shadow: 0 6px 16px rgba(13,110,253,0.08) !important; /* keep same shadow */
}
.tier-card .card-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(220,234,254,0.9) 100%);
    border-bottom: 1px solid rgba(13,110,253,0.2);
    border-top-left-radius: 0.85rem !important; /* ensure header rounded corners */
    border-top-right-radius: 0.85rem !important;
}
.tier-card.tier-premium { border-color: rgba(25,135,84,0.35) !important; }
.tier-card.tier-institutional { border-color: rgba(33,37,41,0.35) !important; }

.feature-item-btn {
    padding: 0.25rem 0;
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
}
.feature-item-btn:hover { color: #0d6efd; cursor: pointer; }
.feature-item-btn:focus { outline: none; }
/* Make the (i) icon blue for visibility */
.feature-item-btn i { color: #0d6efd !important; }

.btn-gradient {
    color: #fff !important;
    background: linear-gradient(90deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%) !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(76, 110, 245, 0.25) !important;
}
.btn-gradient:hover { filter: brightness(1.05); }

/* Darker CTA gradient */
.btn-gradient-dark {
    color: #ffffff !important;
    background-color: #0b5ed7 !important; /* Fallback solid */
    background-image: linear-gradient(135deg, #1f3cf2 0%, #5479ea 45%, #5090f0 100%) !important;
    border: none !important;
    background-size: 140% 140%;
    background-position: 0% 50%;
    box-shadow: 0 10px 20px rgba(11, 94, 215, 0.25), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.12) !important;
    transition: background-position 0.25s ease, filter 0.15s ease, box-shadow 0.2s ease;
}
.btn-gradient-dark:hover {
    background-position: 100% 50%;
    filter: brightness(1.04);
    box-shadow: 0 12px 24px rgba(11, 94, 215, 0.28), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12) !important;
}
.btn-gradient-dark:active {
    background-position: 70% 50%;
    filter: brightness(0.98);
}

.pricing-hero h2 { font-weight: 700; }
.feature-list { padding-left: 1rem; }
.price-text { letter-spacing: 0.3px; }

/* Style Radio toggle inline cleanly on pricing hero */
#billing-toggle .Select-control { background: transparent; }
#billing-toggle input { cursor: pointer; }

/* Custom styles for metric dropdowns to show description only in the list */
.Select-value .metric-option-description {
  display: none;
}

/* Ensure the name is visible */
.Select-value .metric-option-name {
  display: inline !important;
}

/* Make the metric name in dropdowns bolder for emphasis */
.metric-option-name {
  font-weight: 500; /* A nice semi-bold weight */
}

/* Custom font size for metric dropdowns for better readability */
.dbc-sm .Select-value-label,
.dbc-sm .Select-menu-outer .Select-option,
.dbc-sm .Select-placeholder,
.dbc-sm .Select-input > input {
  font-size: 0.95rem; /* Adjust this value for custom control */
}

/* --- Results Section Wrapper --- */
.results-wrapper {
    border: 2px solid var(--section-border-color);
    border-radius: 1rem;
    overflow: hidden; /* This is key to making the border-radius apply to inner elements */
    margin-bottom: 1.5rem;
}

/* Ensure main containers do not block browser gestures */
.force-desktop-viewport,
.force-desktop-wrapper,
.mobile-warning-root,
.modal,
.ag-theme-alpine,
.ag-root-wrapper,
.ag-root,
.ag-body-viewport,
.ag-center-cols-viewport,
.ag-center-cols-container,
.ag-header,
.ag-header-viewport,
.ag-overlay {
    touch-action: auto !important;
}

/* Make the dedicated mobile warning page fully readable at device scale */
/* Disable wrapper scaling on that route by neutralizing the wrapper/container */
.mobile-warning-root .container,
.mobile-warning-root .row,
.mobile-warning-root .col,
.mobile-warning-root {
    max-width: 100% !important;
}

/* Larger, comfortable typography for warning page */
.mobile-warning-root h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
}
.mobile-warning-root p {
    font-size: clamp(1.05rem, 3.8vw, 1.25rem);
}
.mobile-warning-root .btn.btn-lg {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
    padding: 0.85rem 1.25rem;
}
.mobile-warning-root img {
    height: auto !important;
    max-height: 80px !important;
}

/* When status container is inside our new wrapper, remove its original border and radius */
.results-wrapper .status-container-gradient {
    border: none;
    border-radius: 0;
}