/**
 * ============================================================================
 * Microsoft Edge-Specific Styles
 * ============================================================================
 * Location: styles/browser-edge.css
 * Purpose: Enhanced styles for Microsoft Edge to match Safari's polished UI
 * 
 * @version 2.0.0
 * @created February 2026
 * ============================================================================
 */

/* ============================================================================
   BASE RENDERING IMPROVEMENTS
   ============================================================================ */

.browser-edge {
    /* Enhanced font rendering for smoothness and readability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
    text-rendering: optimizeLegibility;
    
    /* Improved text clarity */
    font-weight: 400;
}

/* ============================================================================
   SCROLLBAR STYLING (Match Safari's Native Design)
   ============================================================================ */

.browser-edge ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.browser-edge ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.browser-edge ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}

.browser-edge ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* Light mode scrollbar */
body.light-mode.browser-edge ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border: 3px solid transparent;
    background-clip: padding-box;
}

body.light-mode.browser-edge ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* ============================================================================
   BUTTON ENHANCEMENTS (Shadows & Hover Effects)
   ============================================================================ */

.browser-edge .action-btn,
.browser-edge button {
    /* Smooth transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.browser-edge .action-btn.standard-btn {
    /* Enhanced shadows matching Safari's depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 
                0 4px 16px rgba(33, 150, 243, 0.2);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 
                        0 4px 16px rgba(33, 150, 243, 0.2);
}

.browser-edge .action-btn.standard-btn:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 
                0 6px 24px rgba(33, 150, 243, 0.3);
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 
                        0 6px 24px rgba(33, 150, 243, 0.3);
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
}

.browser-edge .action-btn.standard-btn:active:not(:disabled) {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 
                0 2px 8px rgba(33, 150, 243, 0.15);
}

/* Dark mode button */
.browser-edge .dark-mode-btn,
.browser-edge .logout-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.browser-edge .dark-mode-btn:hover,
.browser-edge .logout-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* Card buttons */
.browser-edge .card-button {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.browser-edge .card-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* ============================================================================
   INPUT ELEMENTS (Alignment & Styling)
   ============================================================================ */

.browser-edge input,
.browser-edge select,
.browser-edge textarea {
    /* Consistent appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Better border rendering */
    border-radius: 8px;
    -webkit-border-radius: 8px;
    
    /* Smooth transitions */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.browser-edge input[type="text"],
.browser-edge input[type="search"],
.browser-edge input[type="email"],
.browser-edge input[type="password"],
.browser-edge input[type="number"] {
    /* Improved padding for better alignment */
    padding: 10px 12px;
    
    /* Subtle shadow for depth */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.browser-edge input[type="text"]:focus,
.browser-edge input[type="search"]:focus,
.browser-edge input[type="email"]:focus,
.browser-edge input[type="password"]:focus,
.browser-edge input[type="number"]:focus {
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1),
                0 0 0 3px rgba(33, 150, 243, 0.1);
    border-color: #2196F3;
}

/* Number input spin buttons */
.browser-edge input[type="number"]::-webkit-inner-spin-button,
.browser-edge input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    height: 32px;
    cursor: pointer;
}

/* Global search input */
.browser-edge .global-search-input {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15),
                0 2px 4px rgba(0, 0, 0, 0.05);
}

.browser-edge .global-search-input:focus {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15),
                0 2px 4px rgba(0, 0, 0, 0.05),
                0 0 0 3px rgba(33, 150, 243, 0.15);
}

/* ============================================================================
   CALENDAR OPTIMIZATIONS
   ============================================================================ */

.browser-edge .calendar-container.compact {
    /* GPU acceleration for smoother animations */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

.browser-edge .calendar-day {
    /* Smooth transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.browser-edge .calendar-day:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   CARD & WIDGET ENHANCEMENTS
   ============================================================================ */

.browser-edge .card,
.browser-edge .widget {
    /* Enhanced shadows for depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
                0 4px 16px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.browser-edge .card:hover,
.browser-edge .widget:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* ============================================================================
   SIDEBAR & NAVIGATION
   ============================================================================ */

.browser-edge .sidebar {
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.browser-edge .sidebar-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.browser-edge .sidebar-item:hover {
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 #2196F3;
}

/* ============================================================================
   MODAL & OVERLAY IMPROVEMENTS
   ============================================================================ */

.browser-edge .sig-modal-overlay,
.browser-edge .modal-overlay {
    /* Smooth backdrop blur */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.browser-edge .sig-modal,
.browser-edge .modal {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 16px 64px rgba(0, 0, 0, 0.15);
    transform: translateZ(0);
}

/* ============================================================================
   GRADIENT & ANIMATION OPTIMIZATIONS
   ============================================================================ */

.browser-edge .action-btn.standard-btn:first-child {
    background: linear-gradient(135deg, #2196F3, #1976D2);
}

.browser-edge .action-btn.standard-btn:last-child {
    background: linear-gradient(135deg, #f44336, #d32f2f);
}

/* Hardware acceleration for animated elements */
.browser-edge .card,
.browser-edge .widget,
.browser-edge .action-btn,
.browser-edge .calendar-day,
.browser-edge .sidebar-item,
.browser-edge .modal {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ============================================================================
   USER INFO BAR ENHANCEMENTS
   ============================================================================ */

.browser-edge .user-info-bar {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15),
                0 4px 24px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   TOOLTIP IMPROVEMENTS
   ============================================================================ */

.browser-edge .tooltip {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

.browser-edge .animated-element {
    will-change: transform, opacity;
}

/* ============================================================================
   CS FILL DATE WIDGET - EDGE-SPECIFIC FIXES
   ============================================================================ */

/* CS Fill Date Widget - Toggle Switch Fixes */
.browser-edge .cs-toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    flex-shrink: 0;
}

.browser-edge .cs-toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.browser-edge .cs-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 20px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.browser-edge .cs-toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: #666666;
    border-radius: 50%;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.browser-edge .cs-toggle-switch input:checked + .cs-toggle-slider {
    background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
    border-color: transparent;
}

.browser-edge .cs-toggle-switch input:checked + .cs-toggle-slider:before {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    background: white;
}

/* CS Fill Date Widget - Table Gridlines Fix */
.browser-edge .cs-fill-table {
    border-collapse: collapse !important;
    border: 1px solid #2a2a2a !important;
    border-spacing: 0;
}

.browser-edge .cs-fill-table th,
.browser-edge .cs-fill-table td {
    border: 1px solid #2a2a2a !important;
}

.browser-edge .cs-fill-table thead {
    background: #1a1a1a;
}

.browser-edge .cs-row-label {
    background: #1a1a1a;
    border-right: 1px solid #2a2a2a !important;
}

/* CS Fill Date Widget - Overall Edge Appearance */
.browser-edge .cs-settings {
    padding: 8px;
    gap: 8px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
}

.browser-edge .cs-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.browser-edge .cs-toggle-text {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
}

.browser-edge .cs-fill-table-container {
    margin-bottom: 10px;
    overflow-x: auto;
}

/* Edge Light Mode - CS Fill Date Widget */
body.light-mode.browser-edge .cs-toggle-slider {
    background: #e5e7eb;
    border-color: #d1d5db;
}

body.light-mode.browser-edge .cs-toggle-slider:before {
    background: #94a3b8;
}

body.light-mode.browser-edge .cs-fill-table th,
body.light-mode.browser-edge .cs-fill-table td {
    border-color: #e5e7eb !important;
}

body.light-mode.browser-edge .cs-fill-table thead {
    background: #f9fafb;
}

body.light-mode.browser-edge .cs-row-label {
    background: #f9fafb;
}

body.light-mode.browser-edge .cs-settings {
    background: #f9fafb;
    border-color: #e5e7eb;
}

body.light-mode.browser-edge .cs-toggle-text {
    color: #1e293b;
}

/* CS Fill Date Widget - Wider on Edge to fit day supply table (6 columns) */
.browser-edge .dashboard-item[data-widget-id="cs-date"] {
    grid-column: span 3 !important;
}

/* Store Info Widget - Match CS Fill Date width on Edge */
.browser-edge .dashboard-item[data-widget-id="store-info"] {
    grid-column: span 3 !important;
}

/* Ensure the table container prevents overflow on Edge */
.browser-edge .dashboard-item[data-widget-id="cs-date"] .widget-content {
    min-width: 0;
    overflow: hidden;
}

.browser-edge .cs-fill-table-container {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.browser-edge .cs-fill-table {
    width: 100%;
    table-layout: auto;
}

/* Responsive breakpoint: Maintain 3-column width at 1200px and below on Edge */
@media (max-width: 1200px) {
    .browser-edge .dashboard-item[data-widget-id="cs-date"] {
        grid-column: span 3 !important;
    }
}

/* Mobile breakpoint: Full width on Edge (matches existing responsive rules) */
@media (max-width: 768px) {
    .browser-edge .dashboard-item[data-widget-id="cs-date"] {
        grid-column: 1 / -1 !important;
    }
}

/* ============================================================================
   CSA CALENDAR - EDGE TEXT CLIPPING FIXES
   ============================================================================ */

/* Result cards - prevent text clipping from overflow:hidden + ::before accent bar */
.browser-edge .result-card {
    padding: 20px 20px 22px 22px;
    overflow: visible !important;
    min-height: 85px;
}

.browser-edge .result-card label {
    line-height: 1.5;
    padding-bottom: 4px;
}

/* Next Fill Date - gradient text clipping fix */
.browser-edge .result-value.large {
    line-height: 1.6;
    padding-bottom: 6px;
    padding-top: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* Fallback for gradient text on Edge */
    -webkit-text-stroke: 0.5px transparent;
}

/* Days Until / Days Since - medium text clipping fix */
.browser-edge .result-value.medium {
    line-height: 1.6;
    padding-bottom: 6px;
    padding-top: 2px;
}

/* General result-value */
.browser-edge .result-value {
    line-height: 1.5;
    padding: 3px 0 6px 0;
}

/* Status card - shimmer overflow clips text */
.browser-edge .status-card {
    padding: 20px 18px 24px;
    overflow: visible !important;
    min-height: 85px;
}

.browser-edge .status-card label {
    line-height: 1.5;
    padding-bottom: 4px;
}

.browser-edge .status-value {
    line-height: 1.6;
    padding: 4px 2px 8px 2px;
}

/* Eligible status - drop-shadow + gradient text clipping */
.browser-edge .status-card.eligible .status-value {
    padding: 6px 4px 10px 4px;
    line-height: 1.6;
}

/* Not eligible status - drop-shadow + gradient text clipping */
.browser-edge .status-card.not-eligible .status-value {
    padding: 6px 4px 10px 4px;
    line-height: 1.6;
}

/* Next Fill Date result day text */
.browser-edge .result-day {
    line-height: 1.5;
    padding-top: 4px;
    padding-bottom: 2px;
}

/* Primary card (Next Fill Date) - ensure gradient text has room */
.browser-edge .result-card.primary {
    min-height: 120px;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

.browser-edge .result-card.primary .result-value {
    /* Increased padding to prevent gradient text clipping on long date strings */
    padding-bottom: 0.6em;
    padding-top: 2px;
    line-height: 1.6;
}

.browser-edge .result-card.primary .result-day {
    padding-top: 0.25em;
    line-height: 1.5;
}

/* ============================================================================
   CSA CALENDAR WIDGET (INDEX PAGE) - EDGE TEXT CLIPPING FIXES
   ============================================================================ */

/* CSA widget result cards */
.browser-edge .csa-result-card {
    padding: 14px 14px 16px;
    overflow: visible !important;
    min-height: 75px;
}

.browser-edge .csa-result-card label {
    line-height: 1.5;
    padding-bottom: 4px;
}

.browser-edge .csa-result-card.csa-primary {
    padding: 16px 14px 18px;
    min-height: 80px;
}

/* CSA widget result values */
.browser-edge .csa-result-value {
    line-height: 1.6;
    padding: 3px 0 6px 0;
    /* Fallback for gradient text on Edge */
    -webkit-text-stroke: 0.5px transparent;
}

.browser-edge .csa-result-value.csa-large {
    line-height: 1.6;
    padding-bottom: 8px;
    padding-top: 2px;
}

.browser-edge .csa-result-value.csa-medium {
    line-height: 1.6;
    padding-bottom: 6px;
    padding-top: 2px;
}

.browser-edge .csa-result-day {
    line-height: 1.5;
    padding-top: 4px;
    padding-bottom: 2px;
}

/* Edge Desktop: Ensure day of week is always visible and styled properly */
/* Note: !important used intentionally to override any conflicting styles for Edge-specific rendering */
.browser-edge-desktop .csa-result-day {
    display: block !important;
    font-size: 11px !important;
    color: var(--text-secondary, #a0a0a0) !important;
    font-weight: 600 !important;
    line-height: 1.5;
    padding-top: 5px;
    padding-bottom: 2px;
    margin-top: 2px;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Edge Desktop: Make Next Fill day more prominent */
/* Note: !important used intentionally to ensure visibility on Edge Desktop */
.browser-edge-desktop .csa-result-card.csa-primary .csa-result-day {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--accent-primary, #00d4ff) !important;
    margin-top: 4px;
}

/* CSA widget status cards */
.browser-edge .csa-status-card {
    padding: 14px 14px 18px;
    overflow: visible !important;
    min-height: 75px;
}

.browser-edge .csa-status-card label {
    line-height: 1.5;
    padding-bottom: 4px;
}

.browser-edge .csa-status-value {
    line-height: 1.6;
    padding: 6px 4px 10px 4px;
}

.browser-edge .csa-status-value.eligible {
    padding: 6px 4px 10px 4px;
    line-height: 1.6;
}

.browser-edge .csa-status-value.not-eligible {
    padding: 6px 4px 10px 4px;
    line-height: 1.6;
}