/*
 * INQUEST Global Design System
 * Material Design 3 Theme with Dark Mode Support
 * 
 * This file contains all global styles, CSS variables, and component classes
 * used across the entire application (auth pages, dashboard, etc.)
 */

/* ============================================
   Alpine.js - Prevent FOUC
   ============================================ */
[x-cloak] {
    display: none !important;
}

/* ============================================
   CSS Variables - Light Theme (default)
   ============================================ */
:root {
    --background: 30 30% 97%;
    --foreground: 30 10% 10%;

    --card: 0 0% 100%;
    --card-foreground: 30 10% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 30 10% 10%;

    /* Brand Orange - Primary */
    --primary: 32 85% 55%;
    --primary-foreground: 30 10% 10%;

    /* Grey - Secondary */
    --secondary: 220 15% 92%;
    --secondary-foreground: 220 10% 30%;

    --muted: 220 10% 94%;
    --muted-foreground: 220 10% 45%;

    /* Blue - Accent */
    --accent: 220 80% 55%;
    --accent-foreground: 0 0% 100%;

    /* Red - Destructive */
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;

    /* Green - Success */
    --success: 155 55% 42%;
    --success-foreground: 0 0% 100%;

    --border: 220 15% 88%;
    --input: 220 15% 96%;
    --ring: 32 85% 55%;

    --radius: 0.75rem;

    /* Sidebar menu - single variables to change all menu items */
    --sidebar-menu-font-size: 14px;
    --sidebar-menu-padding-y: 8px;  /* vertical padding per item (8px, 6px, etc.) */

    --surface-elevated: 0 0% 100%;
    --surface-container: 30 20% 96%;

    --table-header-bg: hsl(220, 10%, 94%); /* light gray in light mode */

    /* Readonly/disabled field – Device IMEI style (elevated surface, readable text) */
    --readonly-bg: 220 10% 93%;
    --readonly-border: 220 10% 78%;
    --readonly-text: 30 10% 10%;

    /* ============================================
       Color Palette (raw hex swatches - reuse across pages)
       Use as: color: var(--color-brand-500); background: var(--color-blue-100);
       ============================================ */
    /* Brand */
    --color-brand-50: #FEF4EC;
    --color-brand-100: #FDECDF;
    --color-brand-200: #FBD8BD;
    --color-brand-300: #F9C499;
    --color-brand-400: #F8B26F;
    --color-brand-500: #F59E32;
    --color-brand-600: #C67F28;
    --color-brand-700: #9A631F;
    --color-brand-800: #784E18;
    --color-brand-900: #4E3210;
    --color-brand-950: #3E280B;

    /* Blue */
    --color-blue-50: #F7F8FD;
    --color-blue-100: #DFE4FB;
    --color-blue-200: #B7C4F5;
    --color-blue-300: #8CA3F0;
    --color-blue-400: #5E83EB;
    --color-blue-500: #2C67E2;
    --color-blue-600: #2455BB;
    --color-blue-700: #1D4495;
    --color-blue-800: #163572;
    --color-blue-900: #102652;
    --color-blue-950: #0C1F44;

    /* Green */
    --color-green-50: #E9FDF1;
    --color-green-100: #ACF9CE;
    --color-green-200: #65E3A2;
    --color-green-300: #59C890;
    --color-green-400: #4CAB7B;
    --color-green-500: #409067;
    --color-green-600: #367956;
    --color-green-700: #2C6247;
    --color-green-800: #234F38;
    --color-green-900: #1A3C2B;
    --color-green-950: #173325;

    /* Yellow */
    --color-yellow-50: #FDF0DC;
    --color-yellow-100: #FBECD2;
    --color-yellow-200: #FAE2B5;
    --color-yellow-300: #F8D793;
    --color-yellow-400: #F7CD6A;
    --color-yellow-500: #ECC256;
    --color-yellow-600: #C3A047;
    --color-yellow-700: #9F833A;
    --color-yellow-800: #7D672E;
    --color-yellow-900: #5E4D22;
    --color-yellow-950: #51431E;

    /* Red */
    --color-red-50: #FDF3F3;
    --color-red-100: #F9DBDA;
    --color-red-200: #F2AFAB;
    --color-red-300: #ED8780;
    --color-red-400: #EA584B;
    --color-red-500: #C73827;
    --color-red-600: #A32E20;
    --color-red-700: #802419;
    --color-red-800: #621B13;
    --color-red-900: #45130D;
    --color-red-950: #381008;

    /* Grey */
    --color-grey-50: #F8F8F9;
    --color-grey-100: #E7E8EB;
    --color-grey-200: #C1C5CD;
    --color-grey-300: #9BA1AF;
    --color-grey-400: #7B8393;
    --color-grey-500: #606773;
    --color-grey-600: #4C525C;
    --color-grey-700: #3F424A;
    --color-grey-800: #2F3238;
    --color-grey-900: #222428;
    --color-grey-950: #1B1D21;
}

/* ============================================
   CSS Variables - Dark Theme
   ============================================ */
.dark {
    --background: 220 15% 8%;
    --foreground: 30 20% 95%;

    --card: 220 15% 12%;
    --card-foreground: 30 20% 95%;

    --popover: 220 15% 14%;
    --popover-foreground: 30 20% 95%;

    /* Brand Orange - Primary */
    --primary: 32 90% 50%;
    --primary-foreground: 30 10% 10%;

    /* Grey - Secondary */
    --secondary: 220 12% 20%;
    --secondary-foreground: 220 10% 85%;

    --muted: 220 12% 18%;
    --muted-foreground: 220 10% 60%;

    /* Blue - Accent */
    --accent: 220 80% 60%;
    --accent-foreground: 0 0% 100%;

    /* Red - Destructive */
    --destructive: 0 70% 55%;
    --destructive-foreground: 0 0% 100%;

    /* Green - Success */
    --success: 155 55% 45%;
    --success-foreground: 0 0% 100%;

    --border: 220 12% 22%;
    --input: 220 12% 18%;
    --ring: 32 90% 50%;

    --surface-elevated: 220 15% 14%;
    --surface-container: 220 15% 16%;

    --table-header-bg: #1e2128; /* dark gray in dark mode */

    /* Readonly/disabled field – Device IMEI style (elevated charcoal, bright text) */
    --readonly-bg: 220 8% 22%;
    --readonly-border: 220 10% 35%;
    --readonly-text: 30 20% 95%;
}

/* ============================================
   Sidebar Navigation - Menu Items
   Change --sidebar-menu-font-size and --sidebar-menu-padding-y in :root above
   ============================================ */
aside nav.sidebar-nav a,
aside nav.sidebar-nav button {
    font-size: var(--sidebar-menu-font-size);
    padding-top: var(--sidebar-menu-padding-y);
    padding-bottom: var(--sidebar-menu-padding-y);
}

/* ============================================
   Base Styles
   ============================================ */
* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Input fields default font size */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    font-size: 14px;
}

/* Enabled input/select/textarea focus: 2px orange ring only (match Tailwind focus:ring-2 focus:ring-primary, all pages) */
input:not([readonly]):not(:disabled):not([type="checkbox"]):not([type="radio"]):focus,
select:not([readonly]):not(:disabled):focus,
textarea:not([readonly]):not(:disabled):focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
}

/* Table header: one rule for all tables (gpsList, History popup, etc.) – uses --muted so light/dark mode applies everywhere */
thead tr,
thead th {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

/* ============================================
   Component Classes
   ============================================ */

/* Material Design Input */
.material-input {
    width: 100%;
    border-radius: 0.5rem;
    background-color: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    padding: 0.75rem 1rem;
    color: hsl(var(--foreground));
    transition: all 0.2s ease;
}

.material-input::placeholder {
    color: hsl(var(--muted-foreground));
}

.material-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px hsl(var(--ring));
}

.material-input:hover:not(:focus) {
    border-color: hsl(var(--muted-foreground) / 0.5);
}

/* Material Design Input - Error State */
.material-input.error,
.material-input:invalid:not(:placeholder-shown) {
    border-color: hsl(var(--destructive));
    background-color: hsl(var(--destructive) / 0.05);
}

.material-input.error:focus,
.material-input:invalid:not(:placeholder-shown):focus {
    outline: none;
    border-color: hsl(var(--destructive));
    box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.2);
}

.material-input.error:hover:not(:focus) {
    border-color: hsl(var(--destructive));
}

/* Material Design Label */
.material-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.5rem;
}

/* Material Design Label - Error State */
.material-label.error {
    color: hsl(var(--destructive));
}

/* Material Design Error Message */
.material-error {
    display: block;
    font-size: 0.875rem;
    color: hsl(var(--destructive));
    margin-top: 0.5rem;
    display: flex;
    align-items-center;
    gap: 0.375rem;
}

.material-error i {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Material Design Card */
.material-card {
    background-color: hsl(var(--card));
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid hsl(var(--border));
}

.dark .material-card {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Material Design Primary Button */
.material-button-primary {
    width: 100%;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-weight: 500;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

/* Ensure all buttons have pointer cursor */
button:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
.cursor-pointer {
    cursor: pointer;
}

/* Disabled state should have not-allowed cursor */
button:disabled,
[type="button"]:disabled,
[type="submit"]:disabled,
.cursor-not-allowed {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Links and clickable elements */
a,
label[for],
select,
[role="button"] {
    cursor: pointer;
}

/* ============================================
   GLOBAL: Checkboxes and radios (single source for entire app)
   Checked state uses primary (orange) everywhere.
   ============================================ */
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    accent-color: hsl(var(--primary)) !important;
}

/* Custom checkbox so primary color is guaranteed (accent-color can be ignored by some browsers) */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid hsl(var(--border));
    border-radius: 0.25rem;
    background: hsl(var(--background));
    flex-shrink: 0;
}
input[type="checkbox"]:checked {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 0.75rem 0.75rem;
    background-position: center;
    background-repeat: no-repeat;
}
input[type="checkbox"]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px hsl(var(--ring));
}
input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.material-button-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
    transform: translateY(-1px);
}

.material-button-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary));
}

.material-button-primary:active {
    transform: translateY(0);
}

/* ============================================
   Utility Classes
   ============================================ */

.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-destructive { background-color: hsl(var(--destructive)); }

.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }

.border-border { border-color: hsl(var(--border)); }
.ring-primary { --tw-ring-color: hsl(var(--primary)); }

/* ============================================
   Animations
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ============================================
   Pagination (reusable across all pages)
   Classes: .pagination-container, .pagination-btn, .pagination-btn.active, .pagination-nav
   ============================================ */

/* Container */
.pagination-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Base button */
.pagination-btn,
.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.375rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover,
.pagination-nav:hover {
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
}

/* Active page */
.pagination-btn.active {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px hsl(var(--accent) / 0.35);
}

.pagination-btn.active:hover {
    background-color: hsl(var(--accent));
    opacity: 0.9;
}

/* Nav arrows (< >) */
.pagination-nav {
    font-size: 1.25rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
}

/* Disabled state */
.pagination-btn:disabled,
.pagination-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pagination-btn:disabled:hover,
.pagination-nav:disabled:hover {
    background: transparent;
}

/* Key icons: icon-key-add.svg, icon-key-add-positive.svg, icon-key-remove.svg, icon-key-remove-negative.svg, icon-key-empty.svg
   Usage: <img src="{{ asset('images/icon-key-add.svg') }}" alt="Add key" width="30" height="30"> */

/* ============================================
   Custom Radio Buttons (orange outline - shared by gpsList, gpsDeviceDetail)
   Usage: <label class="custom-control custom-radio"><input type="radio" class="custom-control-input"><span class="custom-control-label">Label</span></label>
   For icon-only (e.g. gpsList table): add class custom-radio-icon-only to the label
   ============================================ */
:root {
    --radio-size: 16px;
    --radio-dot-size: 8px;
    --radio-border-color: #f59e0b;
    --radio-border-hover: #d97706;
}
.custom-control.custom-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    min-height: 0;
    cursor: pointer;
}
.custom-control.custom-radio .custom-control-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
}
.custom-control.custom-radio .custom-control-label {
    position: relative;
    cursor: pointer;
    padding: 0;
    padding-left: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: hsl(var(--foreground));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.custom-control.custom-radio.custom-radio-icon-only .custom-control-label {
    font-size: 0;
    line-height: 0;
}
.custom-control.custom-radio .custom-control-label::before {
    content: '';
    display: block;
    width: var(--radio-size);
    height: var(--radio-size);
    border-radius: 50%;
    border: 2px solid var(--radio-border-color);
    background: transparent;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.custom-control.custom-radio .custom-control-label::after {
    content: '';
    position: absolute;
    display: block;
    width: var(--radio-dot-size);
    height: var(--radio-dot-size);
    border-radius: 50%;
    background: transparent;
    top: 50%;
    left: calc(var(--radio-size) / 2);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease, background 0.15s ease;
}
.custom-control.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--radio-border-color);
    background: transparent;
}
.custom-control.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background: var(--radio-border-color);
    transform: translate(-50%, -50%) scale(1);
}
.custom-control.custom-radio .custom-control-label:hover::before {
    border-color: var(--radio-border-hover);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

/* ============================================
   Custom Switch (toggle) - orange when checked, shared with radio styling
   Usage: <div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input"><label class="custom-control-label">Label</label></div>
   ============================================ */
.custom-control.custom-switch {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    padding-left: 0;
}
.custom-control.custom-switch .custom-control-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.custom-control.custom-switch .custom-control-label {
    position: relative;
    cursor: pointer;
    margin-bottom: 0;
    padding-left: 25px;
    padding-top: 2px;
    display: inline-flex;
    align-items: center;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}
.custom-control.custom-switch .custom-control-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    width: 56px;
    border-radius: 1.5rem;
    border: 2px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.5);
    transition: all 0.2s ease;
}
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--radio-border-color);
    background-color: var(--radio-border-color);
}
.custom-control.custom-switch .custom-control-label::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    border-radius: 1.5rem;
    background-color: white;
    transition: transform 0.2s ease;
}
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translate(28px, -50%);
}

/* ============================================
   Custom Switch SM (small toggle) - compact variant, same orange when checked
   Usage: <div class="custom-control custom-switch custom-switch-sm">...
   ============================================ */
.custom-control.custom-switch.custom-switch-sm .custom-control-label {
    padding-left: 38px;
    font-size: 0.8125rem;
}
.custom-control.custom-switch.custom-switch-sm .custom-control-label::before {
    height: 18px;
    width: 36px;
    border-radius: 1rem;
}
.custom-control.custom-switch.custom-switch-sm .custom-control-label::after {
    left: 2px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
}
.custom-control.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
    transform: translate(20px, -50%);
}

/* ============================================
   Readonly / Disabled fields (global – all pages)
   Device IMEI style: elevated surface, bright readable text,
   rounded corners, subtle solid outline
   ============================================ */
input[readonly],
input:disabled,
select:disabled,
select[readonly],
textarea[readonly],
textarea:disabled,
.form-control[readonly],
.form-control:disabled {
    background-color: hsl(var(--readonly-bg)) !important;
    color: hsl(var(--readonly-text)) !important;
    -webkit-text-fill-color: hsl(var(--readonly-text)) !important;
    border: 1px solid hsl(var(--readonly-border)) !important;
    border-radius: 0.5rem;
    cursor: default !important;
    opacity: 1;
}
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled {
    cursor: not-allowed !important;
}

/* Readonly/disabled focus: no blue ring, white border only (all pages) */
input[readonly]:focus,
input:disabled:focus,
select[readonly]:focus,
select:disabled:focus,
textarea[readonly]:focus,
textarea:disabled:focus,
.form-control[readonly]:focus,
.form-control:disabled:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: hsl(0 0% 100%) !important;
}