/**
 * Sprint 25 — Ocean ERP Core Styling & Utilities
 * Centralized Presentation Layer for Dark Navy Enterprise Design System
 */
@import './design-tokens.css';

/* Base Root & Body Styling */
html {
    font-size: 16.5px;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* LTR Isolation Helper for Numbers, Currencies, Dates, and Reference Codes in RTL */
.ltr-isolate {
    direction: ltr !important;
    unicode-bidi: isolate;
    display: inline-block;
    text-align: left;
}

/* Localized responsive table container — no global overflow masking */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Card & Surface Token Harmonization */
.bg-white {
    background-color: var(--bg-card) !important;
}
.bg-slate-50, .bg-slate-100 {
    background-color: var(--bg-secondary) !important;
}
.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover {
    background-color: var(--bg-card-hover) !important;
}

/* Border Token Harmonization */
.border-slate-100, .border-slate-200, .border-slate-300 {
    border-color: var(--border-primary) !important;
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-subtle) !important;
}

/* Typography Token Harmonization */
.text-ink {
    color: var(--text-primary) !important;
}
.text-slate-900, .text-slate-800, .text-slate-700, .text-slate-600 {
    color: var(--text-secondary) !important;
}
.text-slate-500, .text-slate-400 {
    color: var(--text-muted) !important;
}

/* Centralized Form & Input Theme */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--primary-subtle) !important;
}

/* Subtle Card Glow on Focus / Hover */
.ocean-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.ocean-card-hover:hover {
    background-color: var(--bg-card-hover);
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: var(--glow-primary);
}

/* Semantic Badges */
.badge-success {
    background-color: var(--success-subtle);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.badge-warning {
    background-color: var(--warning-subtle);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge-danger {
    background-color: var(--danger-subtle);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.badge-info {
    background-color: var(--info-subtle);
    color: var(--info);
    border: 1px solid rgba(14, 165, 233, 0.25);
}
.badge-purple {
    background-color: var(--purple-subtle);
    color: var(--purple);
    border: 1px solid rgba(139, 92, 246, 0.25);
}

/* Button Variants */
.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 0 12px var(--primary-subtle);
}

/* Smooth surface transition */
.transition-surface {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* Full-Width Form & Container Enforcer (Eliminates narrow centered form boxes across all views) */
main > div[class*="max-w-"]:not(.fixed *):not([id*="Modal"] *):not([id*="modal"] *):not([role="dialog"] *),
main > form[class*="max-w-"]:not(.fixed *):not([id*="Modal"] *):not([id*="modal"] *):not([role="dialog"] *),
main div[class*="max-w-lg"]:not(.fixed *):not([id*="Modal"] *):not([id*="modal"] *):not([role="dialog"] *),
main div[class*="max-w-xl"]:not(.fixed *):not([id*="Modal"] *):not([id*="modal"] *):not([role="dialog"] *),
main div[class*="max-w-2xl"]:not(.fixed *):not([id*="Modal"] *):not([id*="modal"] *):not([role="dialog"] *),
main div[class*="max-w-3xl"]:not(.fixed *):not([id*="Modal"] *):not([id*="modal"] *):not([role="dialog"] *),
main div[class*="max-w-4xl"]:not(.fixed *):not([id*="Modal"] *):not([id*="modal"] *):not([role="dialog"] *),
main form[class*="max-w-"]:not(.fixed *):not([id*="Modal"] *):not([id*="modal"] *):not([role="dialog"] *) {
    max-width: 100% !important;
    width: 100% !important;
}

main form {
    width: 100%;
}