/*
 * ======================================================================
 * SecuriFleet - Main Stylesheet (style.css)
 * ======================================================================
 *
 * Contains global styles, custom classes, glassmorphism effect, etc.
 * Works alongside Tailwind CSS utility classes.
 */

/* 1. Base Body Styles */
body {
    /*
      Primary background gradient for the entire application.
      Applied here as a robust fallback.
      Equivalent to Tailwind: bg-gradient-to-br from-gray-900 to-gray-800
    */
    background-color: #111827; /* Fallback color */
    background-image: linear-gradient(to bottom right, #111827, #1f2937);
    
    /* Set the default font stack */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    
    /* Improve font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. The "Glassmorphism" Effect */
/*
 * Apply this class (.bg-glass) to elements for the frosted glass look.
 */
.bg-glass {
    /* Semi-transparent white background (Tailwind: bg-white/5 or bg-white/10) */
    /* Increased opacity slightly for better contrast */
    background-color: rgba(255, 255, 255, 0.07);

    /* Background blur effect */
    -webkit-backdrop-filter: blur(16px); /* Increased blur slightly */
    backdrop-filter: blur(16px);

    /* Subtle border (Tailwind: border border-white/10) */
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Add a subtle inner shadow for depth */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

/* 3. Custom Scrollbar Styling (WebKit Browsers - Chrome, Safari, Edge) */

/* The entire scrollbar element */
::-webkit-scrollbar {
    width: 8px;  /* Width of vertical scrollbar */
    height: 8px; /* Height of horizontal scrollbar */
}

/* The track (the background bar) */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); /* Slightly transparent track */
    border-radius: 10px;
}

/* The handle (the draggable part) */
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25); /* More visible handle */
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border on handle */
}

/* The handle when hovered */
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Optional: Style scrollbar corners (where vertical and horizontal meet) */
::-webkit-scrollbar-corner {
    background: transparent;
}


/* 4. Button Loading State Helpers */
/*
 * Used by main.js and api.js to show/hide loading spinners on buttons.
 */

/* Hide the button text when the loader sibling is visible */
.btn-loader:not(.hidden) + .btn-text {
    display: none;
}

/* Style disabled buttons */
button:disabled,
a:disabled { /* Include links styled as buttons */
    opacity: 0.6;
    cursor: not-allowed;
    /* Prevent hover effects on disabled buttons */
    pointer-events: none;
}

/* 5. Signature Pad Styling */
#signature-pad {
    display: block; /* Remove extra space below canvas */
    width: 100%;
    height: 100%;
    /* Cursor indicating drawing capability */
    cursor: crosshair;
    /* Optional: background color if needed, but usually set on parent */
    /* background-color: #ffffff; */
}

/* 6. Form Field Autofill Styles (WebKit Browsers) */
/*
 * Overrides default browser autofill background/text colors
 * to match the application's theme.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    /* Use box-shadow hack to force background color */
    -webkit-box-shadow: 0 0 0 30px #1f2937 inset !important; /* Matches bg-gray-800 */
    /* Force text color */
    -webkit-text-fill-color: #f3f4f6 !important; /* Matches text-gray-100 */
    /* Ensure caret color also matches */
    caret-color: #f3f4f6;
    /* Optional: Transition for smoother autofill appearance */
    transition: background-color 5000s ease-in-out 0s;
}

/* 7. Dropdown Option Styling (*** NEW RULE ***) */
/*
 * Forces the background and text color for <option> elements
 * to match the dark theme.
 */
option {
    background-color: #1f2937; /* Matches bg-gray-800 */
    color: #f3f4f6; /* Matches text-gray-100 */
}

/* 8. General Focus Ring Styling (Accessibility) */
/*
 * Provides a consistent, visible focus outline for keyboard navigation.
 * Tailwind's focus:ring utilities often handle this, but a base style helps.
 */
*:focus-visible {
    outline: 2px solid #60a5fa; /* Blue-400 */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3); /* Subtle outer glow */
    border-radius: 4px; /* Slightly rounded focus ring */
}
/* Remove default outline when focus-visible is supported */
*:focus:not(:focus-visible) {
  outline: none;
}