/* FastPro - Main Styles */

/* ==========================================================================
   DESIGN TOKENS
   ==========================================================================

   CSS Custom Properties (Design Tokens)

   These tokens provide a centralized design system for FastPro.
   Use these variables instead of hardcoded values for consistency.

   Usage: var(--token-name)
   Example: color: var(--color-primary);

   Token Categories:
   -----------------
   1. Colors - Semantic color palette
   2. Spacing - Consistent spacing scale
   3. Shadows - Elevation system
   4. Border Radius - Corner rounding
   5. Typography - Font sizes and weights
   6. Z-Index - Layer management
   7. Transitions - Animation timing

   ========================================================================== */

:root {
    /* Force light mode to prevent iOS dark mode affecting status bar */
    color-scheme: light only;

    /* Safe area insets for PWA */
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* ========================================
       COLORS - Brand
       ======================================== */

    /* Brand Colors (may be overridden by tenant branding in templates) */
    --color-brand-primary: #1e3a6e;
    --color-brand-secondary: #d22630;

    /* ========================================
       COLORS - UI
       ======================================== */

    --color-primary: #0d6efd;
    --color-primary-hover: #0b5ed7;
    --color-primary-active: #0a58ca;

    --color-success: #198754;
    --color-success-hover: #157347;
    --color-success-active: #146c43;
    --color-success-light: #d1e7dd;
    --color-success-dark: #0f5132;

    --color-danger: #dc3545;
    --color-danger-hover: #bb2d3b;
    --color-danger-active: #b02a37;
    --color-danger-light: #f8d7da;
    --color-danger-dark: #842029;

    --color-warning: #ffc107;
    --color-warning-light: #fff3cd;
    --color-warning-dark: #856404;

    --color-info: #0dcaf0;
    --color-info-light: #cfe2ff;
    --color-info-dark: #084298;

    /* ========================================
       COLORS - Neutral Scale
       ======================================== */

    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    /* ========================================
       COLORS - Semantic Aliases
       ======================================== */

    --color-text: var(--color-gray-900);
    --color-text-muted: var(--color-gray-600);
    --color-text-light: var(--color-gray-700);
    --color-bg: #ffffff;
    --color-bg-light: var(--color-gray-100);
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    --color-border: var(--color-gray-300);
    --color-border-light: var(--color-gray-200);
    --color-border-subtle: #f0f0f0;

    /* ========================================
       SPACING
       ======================================== */

    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */

    /* Component-specific spacing */
    --spacing-card-padding: 20px;
    --spacing-card-header: 15px 20px;
    --spacing-empty-state: 60px 20px;

    /* ========================================
       SHADOWS
       ======================================== */

    --shadow-xs: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

    /* ========================================
       BORDER RADIUS
       ======================================== */

    --radius-sm: 4px;
    --radius-md: 0.375rem;   /* 6px - Bootstrap default */
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 50rem;
    --radius-circle: 50%;

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.85rem;   /* 13.6px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ========================================
       Z-INDEX
       ======================================== */

    --z-mobile-bar: 100;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ========================================
       TRANSITIONS
       ======================================== */

    --transition-fast: 0.1s ease-out;
    --transition-base: 0.15s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
}

/* Ensure html and body also respect light mode */
html, body {
    color-scheme: light only;
}

/* Prevent zoom gestures on touch devices */
html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Loading overlay */
.loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-overlay);
    z-index: var(--z-modal);
}

.loading .spinner-border {
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
}

.loading.show {
    display: block;
}

/* Signature pad styling */
.signature-wrapper {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    overflow: hidden;
}

.signature-pad {
    width: 100%;
    height: 200px;
    display: block;
    touch-action: none;
}

/* Select2 Bootstrap 5 integration fixes */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 38px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    padding: 0.25rem 0.5rem;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
    margin-top: 0;
}

/* Form card styling */
.card {
    box-shadow: var(--shadow-xs);
}

.card-header {
    background-color: var(--color-primary);
    color: var(--color-bg);
    font-weight: var(--font-weight-medium);
}

/* Form label styling */
.form-label {
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.375rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .signature-pad {
        height: 150px;
    }

    h2 {
        font-size: 1.5rem;
    }

    .btn-lg {
        width: 100%;
    }

    /* Prevent iOS auto-zoom on input focus (requires 16px+ font-size) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    textarea,
    select,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   BUTTON SYSTEM
   ==========================================================================

   Button Hierarchy:
   -----------------
   1. Primary Actions (btn-primary): Create, Save, Submit, Confirm
   2. Secondary Actions (btn-outline-secondary): Back, Cancel, Clear
   3. Success Actions (btn-success): Approve, Complete, Activate
   4. Danger Actions (btn-outline-danger): Delete, Remove, Deny
   5. Warning Actions (btn-warning): Suspend, Archive

   Semantic Button Classes:
   ------------------------
   - .btn-approve: Green approve button (equivalent to btn-success)
   - .btn-deny: Red deny button (equivalent to btn-danger)

   Button Sizes:
   -------------
   - Topbar/Header: btn-sm (small)
   - Mobile Action Bar: btn-sm btn-action-sm (compact)
   - Form Submit: Default size (no class) or btn-lg for public forms
   - Table Row Actions: btn-sm

   Icon Guidelines:
   ----------------
   - Desktop buttons: 16x16 SVG icons
   - Mobile action buttons: 14x14 SVG icons
   - Icon margin: class="me-1" (Bootstrap utility)
   - Icon color: fill="currentColor" (inherits button text color)

   Layout Patterns:
   ----------------
   - Topbar actions: Cloned to #mobileActions via JavaScript
   - Form actions: d-flex justify-content-end gap-2 mt-4
   - Mobile filters: .mobile-filters with d-md-none

   ========================================================================== */

/* Semantic action buttons */
.btn-approve {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg);
}
.btn-approve:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-active);
    color: var(--color-bg);
}

.btn-deny {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-bg);
}
.btn-deny:hover {
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-active);
    color: var(--color-bg);
}

/* Table row view button - compact sizing for data tables */
.btn-view {
    padding: 0.35rem 0.75rem;
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   MOBILE LIST FILTERS - Simple responsive show/hide
   ========================================================================== */

/* Hide mobile filters on desktop (md and up) */
@media (min-width: 768px) {
    .mobile-filters {
        display: none !important;
    }
}

/* Hide desktop filters on mobile */
@media (max-width: 767.98px) {
    .desktop-filters {
        display: none !important;
    }
}

/* Mobile filter bar styling */
.mobile-filters {
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.mobile-filters .btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mobile-filters .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Collapse panels for search/filter */
.mobile-filters .collapse {
    margin-top: 0.5rem;
}

.mobile-filters .collapse .card-body {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
}

/* Filter badge indicator */
.filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: var(--color-brand-secondary, #dc3545);
    border-radius: 50%;
}

.btn-filter-toggle {
    position: relative;
}


/* ===========================================
   PWA Native App Enhancements
   =========================================== */

/* Prevent overscroll bounce (iOS rubber-banding) */
body {
    overscroll-behavior: none;
}

/* Remove tap highlight and add touch feedback */
.btn,
.nav-link,
.list-group-item,
.clickable-row,
.sidebar-link,
.dropdown-item {
    -webkit-tap-highlight-color: transparent;
}

/* Active state scale feedback for buttons */
.btn:active {
    transform: scale(0.97);
    transition: transform var(--transition-fast);
}

/* Smooth momentum scrolling for scrollable areas */
.table-responsive,
.offcanvas-body,
.modal-body,
.overflow-auto {
    -webkit-overflow-scrolling: touch;
}

/* Prevent text selection on UI elements (not content) */
.btn,
.nav-link,
.sidebar,
.topbar,
.mobile-filters,
.navbar,
.dropdown-toggle,
.pagination {
    -webkit-user-select: none;
    user-select: none;
}

/* ==========================================================================
   EMPTY STATE COMPONENT
   ========================================================================== */
.empty-state {
    text-align: center;
    padding: var(--spacing-empty-state);
    color: var(--color-text-muted);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-card-padding);
    opacity: 0.5;
}

.empty-state h5 {
    color: var(--color-text-light);
    margin-bottom: 10px;
}

/* ==========================================================================
   STATUS BADGE SYSTEM
   ==========================================================================

   Unified status badge styles for consistent appearance across all pages.
   Use with: {% include 'components/status_badge.html' with status=item.status %}

   Status Categories:
   - Pending/Waiting (amber): Action needed
   - Success/Approved (green): Positive/completed states
   - Danger/Rejected (red): Negative/failed states
   - Info/In Progress (blue): Work in progress
   - Neutral/Inactive (gray): Inactive/archived states

   ========================================================================== */
.status-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Pending/Waiting states - Amber */
.status-pending,
.status-new,
.status-open,
.status-waiting,
.status-submitted,
.status-ordered,
.status-ordering,
.status-scheduled,
.status-invoiced,
.status-plans_in_design,
.status-in_plan_check {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

/* Scheduled state - Teal (intermediate between pending and confirmed) */
.status-scheduled {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* Success/Approved states - Green */
.status-approved,
.status-completed,
.status-active,
.status-confirmed,
.status-passed,
.status-done,
.status-paid,
.status-delivered,
.status-design_complete,
.status-passed_final,
.status-obtained,
.status-no_plans_needed,
.status-no_material_needed,
.status-not_required,
.status-no_inspection_required {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

/* Danger/Rejected states - Red */
.status-denied,
.status-rejected,
.status-cancelled,
.status-failed,
.status-overdue,
.status-backordered {
    background-color: var(--color-danger-light);
    color: var(--color-danger-dark);
}

/* Info/In Progress states - Blue */
.status-in_progress,
.status-assigned,
.status-processing,
.status-working,
.status-reviewing,
.status-signed,
.status-ready_for_job,
.status-passed_rough,
.status-partial {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

/* Neutral/Inactive states - Gray */
.status-inactive,
.status-archived,
.status-closed,
.status-draft,
.status-paused,
.status-on_hold,
.status-not_ordered,
.status-not_started,
.status-not_scheduled,
.status-not_invoiced {
    background-color: var(--color-gray-200);
    color: var(--color-gray-700);
}

/* ==========================================================================
   CONTENT CARD SYSTEM
   ==========================================================================

   Standard card pattern for all forms and content sections.
   Use this instead of Bootstrap .card or custom .section-card patterns.

   Basic Usage:
   ------------
   <div class="content-card mb-3">
       <div class="content-card-header">
           <h5 class="mb-0">Section Title</h5>
       </div>
       <div class="content-card-body">
           <!-- Content goes here -->
       </div>
   </div>

   With Tenant Branding (for form headers):
   ----------------------------------------
   <div class="content-card mb-3">
       <div class="content-card-header" style="background: {{ brand_primary_color }};">
           <h5 class="mb-0 text-white">Section Title</h5>
       </div>
       <div class="content-card-body">
           <!-- Content goes here -->
       </div>
   </div>

   Headerless Card (for simple content):
   -------------------------------------
   <div class="content-card mb-3">
       <div class="content-card-body">
           <!-- Content goes here -->
       </div>
   </div>

   ========================================================================== */
.content-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-card-padding);
}

.content-card-header {
    padding: var(--spacing-card-header);
    border-bottom: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.content-card-header h5 {
    color: var(--color-brand-primary);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.content-card-body {
    padding: var(--spacing-card-padding);
}

/* ==========================================================================
   DETAIL FIELD SYSTEM
   ==========================================================================

   Unified detail field display for all detail pages.
   Uses flexbox for layout with responsive stacking on mobile.

   Basic Usage:
   ------------
   <div class="detail-field">
       <span class="detail-field-label">Employee Name</span>
       <span class="detail-field-value">John Doe</span>
   </div>

   With Default Value:
   -------------------
   <div class="detail-field">
       <span class="detail-field-label">Notes</span>
       <span class="detail-field-value">{{ item.notes|default:"—" }}</span>
   </div>

   Grid Layout (multi-column):
   ---------------------------
   <div class="detail-grid">
       <div class="detail-field">...</div>
       <div class="detail-field">...</div>
   </div>

   ========================================================================== */

.detail-field {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-subtle);
    gap: var(--spacing-md);
}

.detail-field:last-child {
    border-bottom: none;
}

.detail-field-label {
    flex-shrink: 0;
    width: 160px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-field-value {
    flex: 1;
    color: var(--color-text);
}

/* Mobile: Stack vertically */
@media (max-width: 576px) {
    .detail-field {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .detail-field-label {
        width: auto;
    }
}

/* Grid variant for multi-column layouts */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
}

.detail-grid .detail-field {
    padding: 12px 20px 12px 0;
}

/* Detail card styling (header with gradient) */
.detail-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-card-padding);
}

.detail-card-header {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, #2a4a82 100%);
    color: var(--color-bg);
    padding: var(--spacing-card-header);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-weight: var(--font-weight-semibold);
}

.detail-card-body {
    padding: var(--spacing-card-padding);
}

/* Boolean value styling for detail views */
.detail-bool-yes { color: var(--color-success-dark); font-weight: var(--font-weight-medium); }
.detail-bool-no { color: var(--color-text-muted); }

/* ==========================================================================
   FILTER CARD (Desktop)
   ========================================================================== */
.filter-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-card-padding);
    margin-bottom: var(--spacing-card-padding);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   FORM HEADER (Branded)
   ==========================================================================

   Form header with tenant branding for public-facing forms.
   Used on tailgate_form.html and other tenant forms.

   Usage:
   ------
   <div class="form-header mb-4" style="background: linear-gradient(135deg, {{ brand_primary_color }} 0%, {{ brand_secondary_color }} 100%);">
       <div class="d-flex align-items-center p-4">
           <img src="{{ brand_logo_url }}" alt="{{ brand_company_name }}" class="form-header-logo">
           <div class="text-white">
               <h4 class="mb-1">Form Title</h4>
               <p class="mb-0 opacity-75">{{ brand_company_name }}</p>
           </div>
       </div>
   </div>

   ========================================================================== */
.form-header {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.form-header-logo {
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 576px) {
    .form-header .d-flex {
        flex-direction: column;
        text-align: center;
    }

    .form-header-logo {
        margin-right: 0 !important;
        margin-bottom: var(--spacing-sm);
    }

    .form-header h4 {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   CHECKBOX GRID
   ==========================================================================

   Responsive grid layout for checkbox groups (PPE, Medical, Tools, etc.)
   Provides touch-friendly spacing and multi-column layout on desktop.

   Usage:
   ------
   <div class="checkbox-grid">
       <div class="form-check form-check-touch">
           <input type="checkbox" class="form-check-input" id="item1">
           <label class="form-check-label" for="item1">Item Label</label>
       </div>
   </div>

   ========================================================================== */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-sm);
}

@media (max-width: 576px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}

/* Touch-friendly form checks */
.form-check-touch {
    padding: 0.75rem var(--spacing-md);
    padding-left: 2.25rem;
    margin: 0;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.form-check-touch:hover {
    background: var(--color-gray-200);
}

.form-check-touch .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    margin-left: -2rem;
}

.form-check-touch .form-check-label {
    cursor: pointer;
    font-size: var(--font-size-base);
    line-height: 1.25rem;
}

/* Yes/No selector buttons (alternative to dropdowns) */
.yes-no-selector {
    display: flex;
    gap: var(--spacing-sm);
}

.yes-no-selector .btn {
    flex: 1;
    padding: 0.5rem var(--spacing-md);
}

/* Form Yes/No Field - compact inline layout */
.form-field-yesno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-md);
}

.form-field-yesno .field-label {
    flex: 1;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.form-field-yesno select {
    width: auto;
    min-width: 100px;
}

@media (max-width: 576px) {
    .form-field-yesno {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .form-field-yesno select {
        width: 100%;
    }
}

/* ==========================================================================
   SIGNATURE SECTION (Enhanced)
   ==========================================================================

   Enhanced signature section styling with modern clear button.

   ========================================================================== */
.signature-section {
    margin-bottom: var(--spacing-lg);
}

.signature-section .form-label {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.signature-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-sm);
}

.signature-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Print styles */
@media print {
    .loading {
        display: none !important;
    }

    .btn {
        display: none !important;
    }

    .mobile-filters {
        display: none !important;
    }

    .form-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}