/* SSO button (shared) */
.sso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px solid #cc9933;
    color: #cc9933;
    background: transparent;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.login-form-container .sso-btn {
    font-weight: 200;
    font-size: 0.8rem;
}

#requestAccessModalBtn {
    font-weight: 700;
    font-size: 1rem;
    background-color: #cc9933;
}

#sendRequestBtn {
    font-weight: 700;
    font-size: 1rem;
    background-color: #cc9933;
}

#sendRequestBtn:hover {
    background-color: #b8860b;
}

#sendRequestCancelBtn {
    font-weight: 700;
    font-size: 1rem;
    background-color: #6c757d;
}

#sendRequestCancelBtn:hover {
    background-color: #5a6268;
}

#sendRequestCancelBtn:active {
    background-color: #5c636f;
}

.sso-btn:hover {
    background: rgba(204,153,51,0.08);
    color: #cc9933;
    transform: translateY(-1px);
}

/* Auth OR divider (shared) */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    color: #9aa1ad;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0.75rem 0 0.25rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e6e8ef;
}
/* =====================================================================
   BUTTONS & RELATED CONTROLS - COMPREHENSIVE DOCUMENTATION
   =====================================================================
   
   This file contains general button styles and utilities.
   For context-specific buttons, see the respective CSS files below.
   
   BUTTON LOCATIONS ACROSS CSS FILES:
   - modals.css: Modal-specific buttons (delete, remove, share, etc.)
   - chat.css: Chat interface buttons (send, copy, etc.)
   - user_profile.css: Profile and dashboard buttons
   - global.css: Global button utilities and overrides
   - style.css: Theme-specific button variations
   
   STRUCTURE:
   1) Resets & Global Base
   2) Context Variants (navbar, transparent, IDs, icons)
   3) Dropdowns & Menu Items
   4) Link-like Buttons & Utility Controls
   5) Layout Helpers (button containers)
   6) Toggle Switch Controls
   7) Responsive Tweaks
   
   USAGE:
   - Use this file for general button utilities and base styles
   - Use context-specific CSS files for specialized button styling
   - Maintain consistency with design tokens from tokens.css
   
   LAST UPDATED: [Current Date]
   MAINTAINER: [Your Name]
   ===================================================================== */

/* ================================================================
   1) RESETS & GLOBAL BASE
   ---------------------------------------------------------------
   
   This section provides foundational button styles and resets.
   These styles establish the base appearance for all buttons
   and ensure consistency across the application.
   
   FEATURES:
   - Font inheritance for consistent typography
   - Base button styling with design tokens
   - Bootstrap button overrides for consistency
   - Danger button styling for destructive actions
   ================================================================ */

/* Inherit typography & color from parent for form controls/buttons. */
input,
select,
textarea,
button {
    font: inherit;
    color: inherit;
}

/* Global base style for all <button> elements.
   - Aligns content (icon + label)
   - Provides consistent spacing, radius, and transitions
   - Uses design tokens for colors, radius, and easing */
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* space between icon and text */
    cursor: pointer;
    box-sizing: border-box;
    border: none;
    text-align: center;
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    transition:
        background-color var(--duration-normal) var(--ease-standard),
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

/* Simple neutral button utility (opt-in class).
   Note: This intentionally does NOT reset padding or font-weight
   beyond what the browser or parent context provides. */
.btn {
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #ddd;
    font-family: inherit;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #d6293e;
    --bs-btn-border-color: #d6293e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b62335;
    --bs-btn-hover-border-color: #ab2132;
    --bs-btn-focus-shadow-rgb: 220, 73, 91;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ab2132;
    --bs-btn-active-border-color: #a11f2f;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d6293e;
    --bs-btn-disabled-border-color: #d6293e;
}
/* ================================================================
   2) CONTEXT VARIANTS
   ---------------------------------------------------------------
   
   This section contains button styles for specific contexts
   and use cases throughout the application.
   
   VARIANTS:
   - Navbar buttons: Dark navbar with white text
   - Transparent buttons: No background, inherits color
   - Custom transparent buttons: Profile/feedback triggers
   
   NOTE: Modal buttons are handled in modals.css for better organization
   ================================================================ */

/* 2.1) Navbar buttons — ensure contrast on dark navbars.
   Used in: templates/partials/top_navbar.html, templates/partials/sidebar.html */
.navbar button {
    color: var(--bs-white);
}

/* 2.2) Custom transparent button (e.g., profile/feedback triggers).
        - No background/border by default
        - Inherits color; small, bold label styling
        - Hover/focus gets subtle raised background
   Used in: templates/account.html, templates/user_feedback_dashboard.html */
.custom-transparent-btn {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--bs-black);
    padding: 0;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.custom-transparent-btn:focus,
.custom-transparent-btn:hover {
    background-color: #f4f4f4 !important;
    box-shadow: none !important;
}

/* Shown/expanded state (e.g., when used as a dropdown trigger). */
.custom-transparent-btn.show {
    background-color: #f4f4f4 !important;
}


/* 2.3) ID-scoped controls (specific UI hooks)
        Keep these minimal; prefer classes when possible. */
#documentsBtn {
    cursor: pointer;
}

/* Modal navigation buttons.
   - Back: secondary/neutral
   - Welcome back: subtle inner highlight
   - Continue: accent/brand-affirming */
#backBtn {
    background-color: #bbb;
    margin-right: 10px;
}

#backBtn-welcome {
    box-shadow: 0 2px 2px white;
}

#continueBtn {
    background-color: #cc9933;
    color: #fff;
}

/* 2.4) Circular help icon button (typically top-right in chat UI). */
.help-icon {
    font-size: 26px;
    color: #333;
    background-color: #fff;
    border-radius: 50%;
    padding: 9px;
    border: 1px solid #ddd;
    cursor: pointer;
}

/* ================================================================
   3) DROPDOWNS & MENU ITEMS
   ---------------------------------------------------------------
   
   This section contains styles for dropdown menus and menu items.
   These buttons are used for navigation and selection interfaces.
   
   FEATURES:
   - Dropdown toggle buttons
   - Menu item styling
   - Hover and focus states
   
   Used in: Various templates with dropdown navigation
   ================================================================ */

/* Compact dropdown trigger button with neutral look. */
.custom-btn {
    background-color: transparent;
    border: 1px solid #dee2e6;
    color: var(--bs-black) !important;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.375rem 0.65rem;
}

.custom-btn:hover,
.custom-btn:focus {
    background-color: #f5f5f5;
}

/* When used specifically for #chatbotNameDropdown, remove borders/shadows. */
.custom-btn.dropdown-toggle#chatbotNameDropdown {
    border: none;
    box-shadow: none;
}

/* Dropdown menu items: compact spacing and subtle hover/active states. */
.dropdown-item {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem !important;
    color: var(--bs-black) !important;
}

.dropdown-item:hover {
    background-color: #f1f3f5;
    color: #212529;
}

.dropdown-item:active {
    background-color: rgba(13, 110, 253, 0.1);
    color: #212529;
}

/* ================================================================
   4) LINK-LIKE BUTTONS & UTILITY CONTROLS
   ---------------------------------------------------------------
   
   This section contains buttons that look like links or provide
   utility functions throughout the application.
   
   FEATURES:
   - Link-style buttons
   - Utility control buttons
   - Icon-only buttons
   - Action buttons
   
   Used in: Various templates for utility functions and actions
   ================================================================ */

/* 4.1) Overview button — full-width, left-aligned, subtle hover. */
.overview-btn {
    background: transparent;
    border: none;
    color: #374151;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    width: 100%;
    justify-content: flex-start;
    box-shadow: none !important;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.overview-btn:hover {
    background: #f1f5f9;
}

/* 4.2) "See all" link — behaves like a button on hover in light mode. */
.see-all-link {
    text-decoration: none;
    color: var(--bs-gray-500);
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.see-all-link:hover {
    color: var(--bs-gray-700);
    background-color: var(--bs-gray-100);
    transform: scale(1.05);
}

/* 4.3) New chat button — intentionally minimal, text-only look. */
#newchat-button {
    color: black;
    box-shadow: none;
    background-color: transparent;
}

/* ================================================================
   5) LAYOUT HELPERS (BUTTON CONTAINERS)
   ---------------------------------------------------------------
   
   This section contains layout utilities for button containers
   and button groups throughout the application.
   
   FEATURES:
   - Button container layouts
   - Button group styling
   - Flexbox utilities for button alignment
   - Responsive button layouts
   
   Used in: templates/chatbot_creation.html, templates/account.html
   ================================================================ */

/* Absolutely position a compact group of buttons (creation page).
   - Hidden at larger breakpoints by a separate rule below. */
.button-container-small {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
}

/* Show only the small container at wide viewports by default. */
@media (max-width: 5000px) {
    .button-container {
        display: none;
    }

    .button-container-small {
        display: block;
    }
}

/* ================================================================
   6) TOGGLE SWITCH CONTROLS
   ---------------------------------------------------------------
   
   This section contains toggle switch styling for various
   on/off controls throughout the application.
   
   FEATURES:
   - Published toggle switches for chatbots
   - Smooth animations and transitions
   - Focus states for accessibility
   - Brand color integration
   
   Used in: templates/account.html (chatbot published status)
   ================================================================ */

/* Published toggle switch for chatbot management */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #e9ecef;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #ffffff;
    transition: transform 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .slider {
    background-color: #cc9933; /* requested color */
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

.toggle-switch input:focus + .slider {
    box-shadow: 0 0 0 2px rgba(204,153,51,0.25);
}

/* ================================================================
   7) RESPONSIVE TWEAKS
   ---------------------------------------------------------------
   
   This section contains responsive design adjustments for buttons
   across different screen sizes and devices.
   
   FEATURES:
   - Mobile button sizing
   - Touch-friendly button targets
   - Responsive typography
   - Adaptive layouts
   
   BREAKPOINTS:
   - ≤480px: Small phones
   - ≤768px: Tablets and large phones
   ================================================================ */

/* On very small screens, tighten button typography and padding. */
@media (max-width: 480px) {
    button {
        font-size: 1rem;
        padding: 0.75rem;
    }
    
    .toggle-switch {
        width: 40px;
        height: 22px;
    }
    
    .toggle-switch .slider:before {
        height: 16px;
        width: 16px;
    }
    
    .toggle-switch input:checked + .slider:before {
        transform: translateX(18px);
    }
}

/* ========================================
   BUTTON DOCUMENTATION SUMMARY
   ========================================
   
   QUICK REFERENCE FOR DEVELOPERS:
   
   1. BUTTON LOCATIONS BY CONTEXT:
      - General buttons: This file (buttons.css)
      - Modal buttons: modals.css (delete, remove, share, etc.)
      - Chat buttons: chat.css (send, copy, etc.)
      - Profile buttons: user_profile.css (dashboard actions)
      - Global overrides: global.css (Bootstrap overrides)
      - Theme buttons: style.css (brand-specific styling)
   
   2. COMMON BUTTON PATTERNS:
      - Primary actions: var(--color-primary) (#cc9933)
      - Danger actions: #dc3545 (Bootstrap red)
      - Cancel actions: #6c757d (Bootstrap grey)
      - Transparent buttons: No background, inherits color
      - Toggle switches: On/off controls with animations
   
   3. RESPONSIVE CONSIDERATIONS:
      - Minimum touch target: 44px
      - Mobile-friendly padding and typography
      - Adaptive layouts for different screen sizes
      - Focus states for keyboard navigation
   
   4. ACCESSIBILITY:
      - Proper focus indicators
      - High contrast colors
      - Screen reader friendly structure
      - Keyboard navigation support
   
   5. MAINTENANCE:
      - Keep buttons in context-specific CSS files
      - Use design tokens from tokens.css
      - Test across all breakpoints
      - Ensure consistent styling patterns
   
   FILE ORGANIZATION:
   - General utilities in this file
   - Context-specific buttons in their respective files
   - Clear documentation for each section
   - Cross-references to related files
   ======================================== */