/* =========================================================================
   TRIPJEN PLUS - GLOBAL ADMIN STYLES (LIGHT MODE EDITION)
   Role: UI Overrides, Custom Animations, and Global Utilities
   Path: assets/css/admin-style.css
   ========================================================================= */

/* ==========================================
   1. BASE & BROWSER RESETS
   ========================================== */
html, body {
    /* Enforce the fixed layout for the enterprise sidebar architecture */
    height: 100vh;
    overflow: hidden; 
    background-color: #f8fafc; /* Tailwind slate-50 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Text Selection matching Brand Orange */
::selection {
    background-color: rgba(255, 122, 0, 0.2);
    color: #FF7A00;
}
::-moz-selection {
    background-color: rgba(255, 122, 0, 0.2);
    color: #FF7A00;
}

/* Chrome Autofill Override (Prevents yellow/blue background on saved passwords) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #0f172a !important; /* Tailwind slate-900 */
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================
   2. CUSTOM GEOMETRY (SQUIRCLES)
   ========================================== */
/* We use these to create softer, modern corners without relying on basic rounding */
.squircle { 
    border-radius: 2rem; 
} 

.squircle-sm { 
    border-radius: 1.25rem; 
}

/* ==========================================
   3. SCROLLBAR MANAGEMENT
   ========================================== */
/* Completely hides scrollbar but retains scroll functionality */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.no-scrollbar { 
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* Subtle scrollbars for specific overflow tables if needed */
.thin-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.thin-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
    background: #e2e8f0; /* Tailwind slate-200 */
    border-radius: 10px;
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1; /* Tailwind slate-300 */
}

/* ==========================================
   4. CUSTOM ANIMATIONS
   ========================================== */
/* Fade In Up - Used on page load for all major dashboard cards */
@keyframes fade-in-up { 
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

.animate-fade-in-up { 
    animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

/* Soft Pulse - Good for live status indicators */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-soft {
    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================
   5. COMPONENT SPECIFIC STATES
   ========================================== */

/* Glass Input Focus State (Used in the login and legacy forms) */
.glass-input:focus-within { 
    box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.2); 
    border-color: #FF7A00 !important; 
}

/* Drag and Drop Active State (Used in data-management.html) */
.drag-active { 
    border-color: #FF7A00 !important; 
    background-color: rgba(255, 122, 0, 0.05) !important; 
}

/* Table Row Hover Transitions (Ensures smooth highlighting on data ledgers) */
tbody tr {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Button scaling utility for click feedback */
button:active {
    transform: scale(0.97);
}