/* ==========================================================================
   FlexOps Ship Manager - Custom Styles
   Application-specific styles and utility classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global Icon Fixes
   -------------------------------------------------------------------------- */
/* Ensure Material Icons render properly and aren't clipped */
.rz-icon,
i.rz-icon {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

/* Force Material Icons to use proper font settings */
.material-icons,
.rz-icon {
    font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

/* Fix for Radzen cards containing icons */
.rz-card {
    overflow: visible !important;
}

.rz-card > div {
    overflow: visible !important;
}

/* --------------------------------------------------------------------------
   1. Test Results Console (API Diagnostics)
   -------------------------------------------------------------------------- */
textarea.rz-textarea.test-results.w-100 {
    background-color: #0F172A !important;
    color: #22D3EE !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding: 1rem !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    resize: none !important;
    cursor: text !important;
    caret-color: #22D3EE !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    user-select: text !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

textarea.rz-textarea.test-results.w-100::selection {
    background: #334155 !important;
    color: #22D3EE !important;
}

textarea.rz-textarea.test-results.w-100::-moz-selection {
    background: #334155 !important;
    color: #22D3EE !important;
}

/* Blinking cursor animation */
@keyframes blink {
    50% {
        caret-color: transparent;
    }
}

/* --------------------------------------------------------------------------
   2. Button Overrides
   -------------------------------------------------------------------------- */

/* Remove Radzen's default uppercase for buttons */
button.rz-button,
.rz-button {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* Improved button transitions */
button.rz-button,
.rz-button {
    transition: background-color 150ms ease, 
                box-shadow 150ms ease, 
                transform 100ms ease !important;
}

button.rz-button:active,
.rz-button:active {
    transform: translateY(1px) !important;
}

/* --------------------------------------------------------------------------
   3. Page Header Styles
   -------------------------------------------------------------------------- */
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vs-border, #E2E8F0);
}

.page-header h1,
.page-header .rz-text-h1 {
    color: var(--vs-text, #1E293B) !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.page-header-subtitle {
    color: var(--vs-text-secondary, #64748B) !important;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   4. Data Display Enhancements
   -------------------------------------------------------------------------- */

/* Empty state styling */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--vs-muted, #64748B);
}

.empty-state-icon {
    font-size: 4rem !important;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--vs-text, #1E293B);
    margin-bottom: 0.5rem;
}

.empty-state-description {
    font-size: 0.9375rem;
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

/* --------------------------------------------------------------------------
   5. Status Pills / Tags
   -------------------------------------------------------------------------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-pill-success {
    background-color: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}

.status-pill-warning {
    background-color: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
}

.status-pill-danger {
    background-color: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

.status-pill-info {
    background-color: #F0F9FF;
    color: #0284C7;
    border: 1px solid #BAE6FD;
}

.status-pill-neutral {
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

/* --------------------------------------------------------------------------
   6. Action Bar (Page Actions Container)
   -------------------------------------------------------------------------- */
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background-color: #FFFFFF;
    border-radius: 8px;
    border: 1px solid var(--vs-border, #E2E8F0);
    margin-bottom: 1.5rem;
}

.action-bar-left,
.action-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   7. Stats Display
   -------------------------------------------------------------------------- */
.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vs-text, #1E293B);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--vs-muted, #64748B);
    margin-top: 0.25rem;
}

.stat-change {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.stat-change-positive {
    color: #059669;
}

.stat-change-negative {
    color: #DC2626;
}

/* --------------------------------------------------------------------------
   8. Icon Buttons
   -------------------------------------------------------------------------- */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--vs-muted, #64748B);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.icon-btn:hover {
    background-color: var(--vs-slate-100, #F1F5F9);
    color: var(--vs-text, #1E293B);
}

.icon-btn:active {
    background-color: var(--vs-slate-200, #E2E8F0);
}

/* --------------------------------------------------------------------------
   9. Responsive Utilities
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-bar-left,
    .action-bar-right {
        justify-content: center;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   10. Animations
   -------------------------------------------------------------------------- */

/* Fade in animation */
.fade-in {
    animation: fadeIn 300ms ease-out;
}

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

/* Pulse animation for loading states */
.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Spin animation for loaders */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   11. Focus & Selection Styles
   -------------------------------------------------------------------------- */

/* Custom focus ring */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

/* Selection highlight */
::selection {
    background-color: rgba(124, 58, 237, 0.15);
    color: inherit;
}

::-moz-selection {
    background-color: rgba(124, 58, 237, 0.15);
    color: inherit;
}

/* --------------------------------------------------------------------------
   12. Print Overrides
   -------------------------------------------------------------------------- */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .action-bar {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   13. Dashboard / Home Metric Cards
   -------------------------------------------------------------------------- */
.dashboard-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.dashboard-card-wrapper {
    flex: 1 1 260px;
    max-width: 320px;
    min-width: 240px;
}

.dashboard-card {
    cursor: pointer;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
}

.dashboard-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--vs-shadow-md) !important;
}

.dashboard-card .card-content {
    width: 100%;
    height: 100%;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
}

.dashboard-card .card-icon-row {
    margin-bottom: 0.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    overflow: visible;
    padding-top: 0.25rem;
}

.dashboard-card .card-icon-row .rz-icon {
    font-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    max-width: 48px;
    max-height: 48px;
    line-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-card .card-label-row {
    margin-bottom: 0.25rem;
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.dashboard-card .card-value-row {
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

/* Ensure text elements inside cards respect boundaries */
.dashboard-card .card-content .rz-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: inherit;
}

/* Adjust font sizes for better fit */
.dashboard-card .card-label-row .rz-text {
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

.dashboard-card .card-value-row .rz-text {
    font-size: 2.25rem !important;
    line-height: 1 !important;
}

@media (max-width: 767px) {
    .dashboard-card {
        height: 160px;
    }
    
    .dashboard-card .card-content {
        padding: 1rem;
    }
    
    .dashboard-card .card-icon-row {
        height: 40px;
        margin-bottom: 0.4rem;
        overflow: visible;
    }
    
    .dashboard-card .card-icon-row .rz-icon {
        font-size: 40px !important;
        width: 40px !important;
        height: 40px !important;
        max-width: 40px;
        max-height: 40px;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .dashboard-card .card-value-row .rz-text {
        font-size: 1.75rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dashboard-card {
        height: 170px;
    }
}