/* =================================================================
   Territory Manager - BUTTONS ONLY
   All button styling consolidated in one file
   
   Contents:
   1. Base Button Styles - Foundation for all buttons
   2. Primary Action Buttons - Colored backgrounds (Add, Save, Submit)
   3. Table Action Buttons - Text-only style for table rows
   4. Pagination Buttons - Enhanced visibility for navigation
   5. Modal Buttons - Specific styling for modal footers
   6. Button States - Loading, disabled, hover, focus
   7. Responsive - Mobile and tablet adjustments
   ================================================================= */

/* =================================================================
   1. BASE BUTTON STYLES
   Foundation styles applied to all button elements
   - Consistent sizing, spacing, and transitions
   - Remove default browser styles
   - Set up for variant customization
   ================================================================= */

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none; /* Safari support */
    user-select: none; /* Prevent text selection on double-click */
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem; /* Comfortable click target */
    font-size: 1rem;
    border-radius: 0.375rem; /* Rounded corners for modern look */
    /* Smooth transitions for all interactive properties */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Base hover state - maintain text color */
.btn:hover {
    color: #212529;
}

/* Focus state for keyboard navigation accessibility */
.btn:focus {
    outline: 0; /* Remove default outline */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Custom focus ring */
}

/* Disabled state - prevent interaction and show visual feedback */
.btn:disabled,
.btn.disabled {
    opacity: 0.65; /* Visually dimmed */
    cursor: not-allowed; /* Show not-allowed cursor */
    pointer-events: none; /* Prevent any mouse interaction */
}

/* Button size variants for different contexts */

/* Small buttons - table actions, compact UI */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

/* Large buttons - primary CTAs, important actions */
.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

/* =================================================================
   2. PRIMARY ACTION BUTTONS (WITH BACKGROUND)
   High-emphasis buttons for primary actions
   - Add Territory, Save, Submit, Confirm
   - Always have solid colored backgrounds
   - Use !important to override generic [data-action] transparent rules
   ================================================================= */

/* Primary button - Blue for most important actions */
.btn-primary,
.btn-primary[data-action="add"],
button[data-action="add"].btn-primary,
.modal-footer .btn-primary {
    color: #fff !important; /* White text for contrast */
    background-color: #007bff !important; /* Bootstrap primary blue */
    border-color: #007bff !important;
}

/* Primary hover - darker blue for feedback */
.btn-primary:hover,
.btn-primary[data-action="add"]:hover,
button[data-action="add"].btn-primary:hover,
.modal-footer .btn-primary:hover {
    color: #fff !important;
    background-color: #0056b3 !important; /* Darker on hover */
    border-color: #004085 !important;
}

/* Primary focus - maintain hover state with focus ring */
.btn-primary:focus,
.btn-primary[data-action="add"]:focus {
    color: #fff !important;
    background-color: #0056b3 !important;
    border-color: #004085 !important;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5) !important; /* Blue glow */
}

/* Secondary button - Gray for cancel, alternative actions */
.btn-secondary {
    color: #fff;
    background-color: #6c757d; /* Bootstrap gray */
    border-color: #6c757d;
}

/* Secondary hover - darker gray */
.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268; /* Darker gray on hover */
    border-color: #545b62;
}

/* Success button - Green for positive actions (Save, Confirm) */
.btn-success {
    color: #fff;
    background-color: #28a745; /* Bootstrap success green */
    border-color: #28a745;
}

/* Success hover - darker green */
.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

/* Danger button - Red for destructive actions (Delete) */
.btn-danger {
    color: #fff;
    background-color: #dc3545; /* Bootstrap danger red */
    border-color: #dc3545;
}

/* Danger hover - darker red */
.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

/* Warning button - Yellow/Orange for caution actions */
.btn-warning {
    color: #212529; /* Dark text for contrast on light background */
    background-color: #ffc107; /* Bootstrap warning yellow */
    border-color: #ffc107;
}

/* Warning hover - darker yellow */
.btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}

/* Info button - Cyan/teal for informational actions */
.btn-info {
    color: #fff;
    background-color: #17a2b8; /* Bootstrap info cyan */
    border-color: #17a2b8;
}

/* Info hover - darker cyan */
.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

/* =================================================================
   3. TABLE ACTION BUTTONS - TEXT ONLY STYLE
   Low-emphasis buttons for table row actions (View, Edit, Delete)
   - Default style is text-only (transparent background)
   - Colored text to indicate action type
   - Border and light background appear on hover
   - Keeps table clean and scannable
   ================================================================= */

/* Base style for all table action buttons - transparent by default
   IMPORTANT: scope to tables only so header/pagination primary buttons keep their solid backgrounds */
.table .btn-sm,
.action-buttons .btn,
.table button[data-action] {
    background: transparent !important; /* No background unless specified */
    border: 1px solid transparent !important; /* Invisible border by default */
    font-weight: 500; /* Medium weight for readability */
    padding: 0.25rem 0.75rem; /* Compact padding for tables */
    transition: all 0.2s ease; /* Smooth transitions on interaction */
    box-shadow: none !important; /* No shadow for flat look */
}

/* Action button text colors - Each action has semantic color */

/* View action - Blue (informational) */
.table .btn-info,
button[data-action="view"] {
    color: #3b82f6 !important; /* Bright blue for view */
}

/* Edit action - Purple (modification) */
.table .btn-primary,
button[data-action="edit"] {
    color: #8b5cf6 !important; /* Purple for edit */
}

/* Edit action - Purple (modification) */
.table .btn-primary,
button[data-action="notes"] {
    color: #3f3e41 !important; /* Dark gray for notes */
}

/* Allocate action - Green (positive action) */
.table .btn-success,
button[data-action="allocate"] {
    color: #10b981 !important; /* Green for allocate */
}

/* Warning actions - Orange (caution required) */
.table .btn-warning,
button[data-action="change-password"],
button[data-action="update-worked"],
button[data-action="clear_worked_date"],
button[data-action="rollback"], button[data-action="demote_user"] {
    color: #f59e0b !important; /* Orange for warning actions */
}

/* Delete action - Red (destructive) */
.table .btn-danger,
button[data-action="delete"] {
    color: #ef4444 !important; /* Red for delete */
}

/* Return territory - Purple (special action) */
button[data-action="return-territory"] {
    color: #B02ED4 !important; /* Custom purple */
}

/* Cancel allocation - Dark orange */
button[data-action="cancel_allocation"] {
    color: #D48026 !important; /* Dark orange */
}

/* Unarchive action - Gray (restore) */
button[data-action="unarchive"] {
    color: #6c757d !important; /* Gray for unarchive */
}


button[data-action="notes"] {
    color: #565d63 !important; /* Gray for notes */
}


button[data-action="add-note"] {
    color: #28a745 !important; /* Green text for add note */
    background: transparent !important; /* Ensure no background */
    border-color: transparent !important; /* No border by default */
}

/* =================================================================
   HOVER STATES FOR TABLE ACTION BUTTONS
   On hover: show colored border + light tinted background matching the text color
   This provides clear feedback while maintaining clean default state
   ================================================================= */

/* View hover - Blue border and background */
.table .btn-info:hover,
button[data-action="view"]:hover {
    border-color: #3b82f6 !important; /* Blue border appears */
    background: rgba(59, 130, 246, 0.05) !important; /* Light blue tint */
}

.table .btn-primary:hover,
button[data-action="edit"]:hover {
    border-color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.05) !important;
}

.table .btn-success:hover,
button[data-action="allocate"]:hover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.05) !important;
}

 .table .btn-warning:hover,
button[data-action="change-password"]:hover,
button[data-action="update-worked"]:hover,
button[data-action="clear_worked_date"]:hover,
button[data-action="rollback"]:hover, button[data-action="demote_user"]:hover {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.05) !important;
}

.table .btn-danger:hover,
button[data-action="delete"]:hover {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

button[data-action="return-territory"]:hover {
    border-color: #B02ED4 !important;
    background: rgba(176, 46, 212, 0.05) !important;
}

button[data-action="cancel_allocation"]:hover {
    border-color: #D48026 !important;
    background: rgba(212, 128, 38, 0.05) !important;
}

button[data-action="unarchive"]:hover {
    border-color: #6c757d !important;
    background: rgba(108, 117, 125, 0.05) !important;
}

/* Notes button hover - darken background */
button[data-action="notes"]:hover,
.btn[data-action="notes"]:hover {
    background-color: #5a62681a !important; /* Darker gray on hover */
    border-color: #545b62a4 !important;
}

/* Add Note button hover - darker green */
button[data-action="add-note"]:hover,
.btn[data-action="add-note"]:hover {
    background-color: transparent !important; /* Keep text-only on hover */
    border-color: transparent !important;
    text-decoration: underline; /* Subtle link-like cue */
}

/* Active/focus states for action buttons */

/* Active (clicked) state - subtle scale down for tactile feedback */
.table .btn-sm:active,
button[data-action]:active {
    transform: scale(0.97); /* Slight shrink when pressed */
}

/* Focus state for keyboard navigation - remove default outline */
.table .btn-sm:focus,
button[data-action]:focus {
    outline: none; /* Remove browser default */
    box-shadow: none !important; /* Clean focus for table actions */
}

/* Disabled state for action buttons - prevent interaction */
button[data-action]:disabled,
button[data-action].disabled {
    opacity: 0.4; /* Very dim to show unavailable */
    cursor: not-allowed; /* Not-allowed cursor */
    pointer-events: none; /* Completely block interaction */
}

/* =================================================================
   4. PAGINATION BUTTONS - ENHANCED VISIBILITY
   Navigation buttons for table pagination
   - Fixed size for consistent click targets
   - Active page has solid background
   - Hover state provides clear feedback
   - Disabled for first/last pages
   ================================================================= */

/* Base pagination button - consistent square shape */
.pagination-buttons .btn {
    min-width: 38px !important; /* Square button, good touch target */
    height: 38px !important;
    display: inline-flex !important; /* Center content perfectly */
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important; /* Bold numbers */
    border-radius: 0.375rem !important; /* Rounded corners */
    transition: all 0.15s ease !important; /* Quick transitions */
}

/* Active page button - solid blue to show current page */
.pagination-buttons .btn-primary {
    background-color: #007bff !important; /* Blue background for active */
    border-color: #007bff !important;
    color: #ffffff !important; /* White text */
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3); /* Subtle blue glow */
}

/* Inactive page buttons - white background with border */
.pagination-buttons .btn-secondary {
    background-color: #ffffff !important; /* White background */
    border: 1px solid #ced4da !important; /* Gray border */
    color: #495057 !important; /* Dark gray text */
}

/* Hover state for inactive pagination buttons */
.pagination-buttons .btn-secondary:hover:not(:disabled) {
    background-color: #f8f9fa !important; /* Light gray background */
    border-color: #007bff !important; /* Blue border on hover */
    color: #007bff !important; /* Blue text on hover */
    transform: translateY(-1px); /* Slight lift effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow for lift */
}

/* Disabled pagination buttons (first/last pages, no prev/next) */
.pagination-buttons .btn:disabled {
    opacity: 0.4 !important; /* Dim appearance */
    cursor: not-allowed !important; /* Not-allowed cursor */
    background-color: #e9ecef !important; /* Light gray background */
    border-color: #dee2e6 !important; /* Gray border */
    color: #6c757d !important; /* Gray text */
}

/* =================================================================
   5. MODAL BUTTONS - Removed duplicates
   Modal button styling already in Section 2 (Primary/Secondary)
   Kept only modal-specific width constraint
   ================================================================= */

/* Minimum width for modal buttons - ensures consistency */
.modal-footer .btn {
    min-width: 80px; /* Prevents narrow buttons with short labels */
}

/* =================================================================
   5a. MODAL TEXT-ONLY BUTTONS
   Clean, minimal button style for modal action buttons
   - No background by default (transparent)
   - Colored text to indicate action type
   - Border and light background on hover
   - Better readability and modern look
   ================================================================= */

/* Base text-only button - transparent background, colored text */
.btn-text {
    background: transparent !important;
    border: 1px solid transparent !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    box-shadow: none !important;
    min-width: 80px;
}

/* Primary text button - Blue */
.btn-text-primary {
    color: #007bff !important;
}

.btn-text-primary:hover {
    color: #0056b3 !important;
    border-color: #007bff !important;
    background: rgba(0, 123, 255, 0.08) !important;
}

/* Secondary text button - Gray */
.btn-text-secondary {
    color: #6c757d !important;
}

.btn-text-secondary:hover {
    color: #545b62 !important;
    border-color: #6c757d !important;
    background: rgba(108, 117, 125, 0.08) !important;
}

/* Success text button - Green */
.btn-text-success {
    color: #28a745 !important;
}

.btn-text-success:hover {
    color: #1e7e34 !important;
    border-color: #28a745 !important;
    background: rgba(40, 167, 69, 0.08) !important;
}

/* Danger text button - Red */
.btn-text-danger {
    color: #dc3545 !important;
}

.btn-text-danger:hover {
    color: #bd2130 !important;
    border-color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.08) !important;
}

/* Warning text button - Orange */
.btn-text-warning {
    color: #fd7e14 !important;
}

.btn-text-warning:hover {
    color: #d66300 !important;
    border-color: #fd7e14 !important;
    background: rgba(253, 126, 20, 0.08) !important;
}

/* Info text button - Cyan */
.btn-text-info {
    color: #17a2b8 !important;
}

.btn-text-info:hover {
    color: #117a8b !important;
    border-color: #17a2b8 !important;
    background: rgba(23, 162, 184, 0.08) !important;
}

/* Active state for text buttons */
.btn-text:active {
    transform: scale(0.97);
}

/* Focus state for text buttons */
.btn-text:focus {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.15) !important;
}

/* =================================================================
   6. BUTTON STATES
   Special states for buttons during async operations
   - Loading state shows spinner or text indicator
   - Prevents multiple clicks during processing
   ================================================================= */

/* Loading state - button is processing an action */
.btn.loading {
    position: relative; /* For absolute positioning of spinner */
    pointer-events: none; /* Prevent additional clicks */
    opacity: 0.6; /* Dim to show processing */
}

/* Loading spinner for solid buttons */
.btn.loading::after {
    content: ''; /* Empty content, just a visual element */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the spinner */
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor; /* Only top border visible */
    border-radius: 50%; /* Make it circular */
    animation: btn-spin 1s linear infinite; /* Continuous spin */
}

/* Loading text indicator for action buttons (text-only style) */
button[data-action].loading::after {
    content: " ..."; /* Three dots instead of spinner */
    margin-left: 0.25rem;
}

/* Keyframe animation for spinning loader */
@keyframes btn-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =================================================================
   7. RESPONSIVE - MOBILE AND TABLET ADJUSTMENTS
   Optimize button sizing and layout for smaller screens
   - Reduce padding and font size on tablets
   - Stack modal buttons vertically on phones
   ================================================================= */

/* Tablet and smaller - compact action buttons */
@media (max-width: 768px) {
    /* Hide individual action buttons, show only first 2 */
    .table tbody td:last-child button[data-action]:nth-child(n+3) {
        display: none !important;
    }
    
    /* First 2 buttons - very compact with short text */
    .table .btn-sm,
    button[data-action] {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.7rem !important;
        min-height: 28px;
        white-space: nowrap;
    }
    
    /* Alternative: Show all buttons super compact - uncomment if preferred
    .table tbody td:last-child {
        gap: 0.15rem !important;
    }
    
    .table .btn-sm,
    button[data-action] {
        padding: 0.2rem 0.3rem !important;
        font-size: 0.65rem !important;
        min-height: 24px;
        line-height: 1.2;
    }
    */
    
    /* General small buttons - more compact */
    .btn-sm {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Always keep Allocate visible on small screens */
    .table tbody td:last-child button[data-action="allocate"] {
        display: inline-flex !important;
    }
}

/* Mobile phones - smaller fonts and stack modal buttons */
@media (max-width: 600px) {
    /* All buttons smaller on mobile */
    .btn {
        font-size: 0.85rem; /* Zwiększone z 0.8rem */
        padding: 0.5rem 0.75rem; /* Zwiększone z 0.4rem 0.6rem */
        min-height: 44px; /* Zgodnie z WCAG touch target guidelines */
    }
    
    /* Table action buttons - WCAG compliant touch targets */
    .table .btn-sm,
    button[data-action] {
        padding: 0.4rem 0.5rem; /* Zwiększone z 0.25rem */
        font-size: 0.8rem; /* Zwiększone z 0.72rem */
        min-width: 44px !important; /* WCAG minimum */
        min-height: 44px !important; /* WCAG minimum */
        border-radius: 8px !important;
    }
    /* Icons are injected inline via JS; no pseudo icons here */
    
    /* Modal footer buttons take full width and stack */
    .modal-footer .btn {
        width: 100%; /* Full width for easy tapping */
        margin-bottom: 0.5rem; /* Space between stacked buttons */
        font-size: 0.9rem; /* Zwiększone z 0.875rem */
        min-height: 48px; /* Większe dla łatwiejszego klikania */
    }

    /* Territories (phone): hide Add buttons in header and pagination */
    .page-header [data-action="add"][data-type="territories"],
    .page-header [data-action="add-multiple"][data-type="territories"],
    .pagination-controls [data-action="add-multiple"][data-type="territories"] {
        display: none !important;
    }

    /* Territories (phone): hide Notes button when no notes exist */
    .table-territories .table tbody td:last-child [data-action="notes"][data-has-notes="0"] {
        display: none !important;
    }
}

@media (max-width: 576px) {
    /* Fallback for very small screens */
    .modal-footer .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}