/* ===============================================
   MaintainIQ — Premium CSS
   Responsive: 320px → 1920px
   =============================================== */

/* ===== CSS VARIABLES ===== */
:root {
    --bg-primary:    #0f172a;
    --bg-secondary:  #1e293b;
    --border-color:  #1e293b;
    --text-primary:  #f1f5f9;
    --text-muted:    #64748b;
    --cyan:          #22d3ee;
    --cyan-dark:     #06b6d4;
    --emerald:       #34d399;
    --amber:         #fbbf24;
    --red:           #f87171;
    --transition:    all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(15,23,42,0.5); }
::-webkit-scrollbar-thumb { background: rgba(34,211,238,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,0.5); }

/* ===== ANIMATIONS ===== */
@keyframes slide-in  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes slide-out { from { opacity:1; transform:translateX(0); }    to { opacity:0; transform:translateX(20px); } }
@keyframes fade-in   { from { opacity:0; transform:translateY(8px); }  to { opacity:1; transform:translateY(0); } }
@keyframes pulse-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.4); }
    50%      { box-shadow: 0 0 0 10px rgba(34,211,238,0); }
}
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position:  1000px 0; }
}
@keyframes pulse {
    0%,100% { opacity:1; }
    50%      { opacity:0.5; }
}

.animate-slide-in  { animation: slide-in  300ms ease-out; }
.animate-slide-out { animation: slide-out 300ms ease-in forwards; }
.animate-fade-in   { animation: fade-in   300ms ease-out; }
.animate-pulse-glow { animation: pulse-glow 2s infinite; }
.animate-pulse     { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ===== SIDEBAR ===== */
/* Desktop: always visible via lg:translate-x-0 (Tailwind) */
/* Mobile: slides in/out via JS toggle */
#sidebar {
    will-change: transform;
}

/* ===== MAIN CONTENT ===== */
/* Desktop offset handled by Tailwind lg:ml-64 */

/* ===== FORMS ===== */
input, select, textarea {
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-primary);
}
input:focus, select:focus, textarea:focus {
    background-color: rgba(30,41,59,0.9) !important;
}
textarea { resize: vertical; min-height: 80px; max-height: 300px; }

/* ===== TABLES ===== */
table { border-collapse: collapse; width: 100%; }
thead tr { background-color: rgba(30,41,59,0.4); }
td, th   { padding: 0.75rem 0.5rem; text-align: left; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }

/* ===== MODALS ===== */
.hidden   { display: none !important; }
.flex     { display: flex !important; }

/* Prevent body scroll when modal is open */
body.modal-open { overflow: hidden; }

/* Modal inner scrollability */
#assetModal > div,
#viewModal  > div,
#qrModal    > div {
    max-height: 90vh;
    overflow-y: auto;
}

/* ===== BUTTONS ===== */
button, a { cursor: pointer; }
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--cyan-dark);
    outline-offset: 2px;
}

/* ===== HOVER SCALE ===== */
.hover\:scale-105:hover { transform: scale(1.05); transition: var(--transition); }

/* ===== UTILITY ===== */
.opacity-50        { opacity: 0.5; }
.cursor-not-allowed { cursor: not-allowed; }
.whitespace-nowrap { white-space: nowrap; }
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== SHADOW TINTS ===== */
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.25); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); }

/* ===== SKELETON LOADER ===== */
.skeleton {
    animation: shimmer 2s infinite;
    background: linear-gradient(90deg,
        rgba(30,41,59,0.5) 0%,
        rgba(30,41,59,0.85) 50%,
        rgba(30,41,59,0.5) 100%);
    background-size: 1000px 100%;
    border-radius: 4px;
}

/* ===== GLASS ===== */
.glass {
    background: rgba(30,41,59,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(71,85,105,0.2);
}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: -0.3px; }
p { color: var(--text-muted); }
a { text-decoration: none; transition: var(--transition); }
code {
    background: rgba(30,41,59,0.8);
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: "Monaco","Courier New",monospace;
}

/* ===== TOAST CONTAINER (always on top) ===== */
#toastContainer { pointer-events: none; }
#toastContainer > div { pointer-events: all; }

/* =====================================================
   RESPONSIVE BREAKPOINTS
   ===================================================== */

/* --- 320px — 374px (tiny phones) --- */
@media (max-width: 374px) {
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    .grid { gap: 0.75rem !important; }
    td, th { padding: 0.4rem 0.3rem; font-size: 0.75rem; }
    #assetModal > div,
    #viewModal  > div,
    #qrModal    > div { padding: 1rem; }
}

/* --- Up to 640px (small phones) --- */
@media (max-width: 640px) {
    td, th { padding: 0.5rem 0.4rem; font-size: 0.8rem; }

    /* Action buttons stack tighter */
    .flex.gap-2, .flex.gap-1\.5 { flex-wrap: wrap; }

    /* Stat cards: 2-column grid on tiny screens */
    .grid.grid-cols-2 { gap: 0.75rem; }

    /* QR modal center */
    #qrCode { justify-content: center; }
}

/* --- Up to 768px (tablets / large phones) --- */
@media (max-width: 768px) {
    /* Modals take full available width */
    #assetModal > div,
    #viewModal  > div,
    #qrModal    > div {
        width: 100% !important;
        max-width: calc(100vw - 2rem);
    }

    /* Hide location column on small tables */
    .hidden-sm { display: none !important; }

    /* Issue description truncated on mobile */
    .issue-desc { max-width: 180px; }
}

/* --- 1024px+ (desktop) --- */
@media (min-width: 1024px) {
    /* Sidebar always translated back to 0 by Tailwind lg:translate-x-0 */
    #sidebarOverlay { display: none !important; }
}

/* --- 1280px+ --- */
@media (min-width: 1280px) {
    td, th { padding: 0.875rem 0.75rem; }
}

/* --- 1920px+ (large monitors) --- */
@media (min-width: 1920px) {
    main > div { max-width: 1600px; margin-left: auto; margin-right: auto; }
}

/* ===== PRINT ===== */
@media print {
    body    { background: white; color: black; }
    #sidebar, #sidebarOverlay, #toastContainer,
    #assetModal, #viewModal, #qrModal,
    button, .no-print { display: none !important; }
    main { margin-left: 0 !important; }
    table { font-size: 0.8rem; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== HIGH CONTRAST ===== */
@media (prefers-contrast: more) {
    :root {
        --bg-primary: #000;
        --bg-secondary: #111;
        --text-primary: #fff;
    }
}