/* ===============================================
   TRAVEL AGENCY APP - GLOBAL BASE STYLES
   ===============================================
   This file contains only the most fundamental,
   application-wide CSS resets and base styles.
   Specific component and page styles are in their
   respective files under /static/css/.
   =============================================== */

/* ===============================================
   ROOT VARIABLES
   =============================================== */
:root {
    /* Primary Colors - Updated */
    --primary-color: #007aff; /* Blue iOS style */
    --primary-light: #5ac8fa;
    --primary-dark: #0056b3;

    /* Secondary Colors */
    --secondary-color: #5ac8fa; /* Light Blue */
    --secondary-light: #58d68d;
    --secondary-dark: #27ae60;

    /* Accent/Status Colors */
    --info-color: #5ac8fa; /* Light Blue */
    --info-light: #5ed8ff;
    --info-dark: #138496;

    --warning-color: #ffcc00; /* Yellow */
    --warning-light: #f7dc6f;
    --warning-dark: #e67e22;

    --danger-color: #ff3b30; /* Red iOS style */
    --danger-light: #ec7063;
    --danger-dark: #c0392b;

    --success-color: #4cd964; /* Green iOS style */
    --success-light: #52be80;
    --success-dark: #1e8449;

    /* Neutral Colors - Updated */
    --text-color: #333; /* iOS style dark */
    --text-light: #7f8c8d; /* Light Grey */
    --text-muted: #95a5a6; /* Muted Grey */
    --text-dark: #1c1c1e; /* iOS dark color */

    --bg-light: #f5f5f5; /* Light background */
    --bg-white: #ffffff; /* Pure White */
    --bg-dark: #1c1c1e; /* iOS dark color */
    --background-color: #f5f5f5; /* Main background */

    /* Border & Shadow */
    --border-color: #d1d1d6; /* iOS style border */
    --border-dark: #dee2e6; /* Slightly Darker Border */
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.15);

    /* Typography */
    --font-family-base: 'Poppins', 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.6;

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

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 15px;
    --border-radius-full: 50%;
}

/* ===============================================
   CSS RESET & BASE STYLES
   =============================================== */

/* Universal Box-Sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Body Base Styles */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    background-color: var(--bg-light);
    color: var(--text-color);
    line-height: var(--line-height-base);
    min-height: 100vh; /* Ensure full viewport height */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Base Typography */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--text-color);
    font-weight: 600;
}

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below images */
}

/* Lists */
ul, ol {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

li {
    margin-bottom: var(--spacing-xs);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
}

th, td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: var(--bg-light);
    font-weight: 600;
    color: var(--text-dark);
}

/* Form Elements - Basic Reset */
input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* General Layout Containers */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--spacing-lg);
}

.main-content {
    max-width: 1400px; /* Wider for main content area */
    margin-left: auto;
    margin-right: auto;
    padding: var(--spacing-xl);
}

/* Global Utility Classes (Minimal) */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-block { display: inline-block; }
.d-none { display: none; } /* Used with JS to toggle visibility */

.hidden { display: none !important; visibility: hidden; } /* Strong hidden class */
.show { display: block !important; visibility: visible; } /* Strong show class */

/* Font Awesome Base Icon Styling (Loaded via base.html) */
.fas, .far, .fab {
    /* No specific styles here, just to ensure it's loaded */
}

/* Image fallback for missing images */
img:not([src]):not([src=""]):not([src*="undefined"]):not([src*="null"]) {
    /* Optional: Add a placeholder background or border for broken images */
    background-color: var(--bg-light);
    border: 1px dashed var(--border-color);
    padding: var(--spacing-sm);
}

/* Accessibility */
[tabindex="-1"]:focus {
    outline: none; /* Remove outline for programmatically focused elements */
}

/* Print Specific Overrides (minimal global print rules) */
@media print {
    body {
        background-color: white !important;
        -webkit-print-color-adjust: exact !important; /* For Chrome/Safari */
        color-adjust: exact !important; /* Standard */
    }
    a {
        text-decoration: none !important; /* Remove underlines from links */
        color: black !important; /* Print links in black */
    }
}