/* ============================================
   Riosan Materials & Supply Directory
   Styles — Mobile-First
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {
    background-color: #F4F5F7;
    font-family: 'DM Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

/* ---- Scrollbars ---- */
.custom-scrollbar::-webkit-scrollbar        { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track  { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 10px; }

.sidebar-scrollbar::-webkit-scrollbar       { width: 3px; }
.sidebar-scrollbar::-webkit-scrollbar-track { background: transparent; }
.sidebar-scrollbar::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; }

/* ---- App Shell ---- */
#appShell { display: none; }
#appShell.visible {
    display: flex;
    flex-direction: column;
    height: 100dvh;        /* dynamic viewport height — handles mobile browser chrome */
    overflow: hidden;
}

/* On lg+ switch to row layout */
@media (min-width: 1024px) {
    #appShell.visible { flex-direction: row; }
}

/* ---- Sidebar ---- */
aside {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 100dvh;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
aside.open { transform: translateX(0); }

@media (min-width: 1024px) {
    aside {
        position: relative;
        transform: translateX(0) !important;
        height: 100%;
        flex-shrink: 0;
        width: 260px;
    }
}

/* ---- Mobile Overlay ---- */
#mobileOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 39;
    display: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
#mobileOverlay.visible {
    display: block;
    opacity: 1;
}

/* ---- Main content ---- */
#mainContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* On mobile, leave room for bottom nav */
    padding-bottom: 64px;
}
@media (min-width: 1024px) {
    #mainContent { padding-bottom: 0; }
}

/* ---- Bottom Nav (mobile only) ---- */
#bottomNav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    z-index: 30;
    display: flex;
    align-items: stretch;
    background: #0C0C0C;
    border-top: 1px solid #1e1e1e;
    padding: 0 4px;
}
@media (min-width: 1024px) {
    #bottomNav { display: none; }
}

.bottom-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #555;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-btn i { font-size: 18px; }
.bottom-nav-btn:active { color: #E60000; }
.bottom-nav-btn.active { color: #E60000; }

/* ---- Cards ---- */
.material-card {
    border-top: 3px solid #E60000;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.material-card:active { transform: scale(0.99); }

/* ---- Modal ---- */
#crudModal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: flex-end;    /* bottom sheet on mobile */
    justify-content: center;
    padding: 0;
}
#crudModal.open { display: flex; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12,12,12,0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

.modal-box {
    position: relative;
    z-index: 1;
    background: #fff;
    width: 100%;
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Drag handle */
.modal-handle {
    width: 40px; height: 4px;
    background: #e2e8f0;
    border-radius: 4px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    #crudModal {
        align-items: center;
        padding: 16px;
    }
    .modal-box {
        border-radius: 20px;
        max-width: 860px;
        max-height: 92dvh;
        animation: popIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    .modal-handle { display: none; }
}

/* ---- Animations ---- */
@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes popIn {
    from { transform: scale(0.95) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ---- Login shake ---- */
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(5px); }
}
.login-shake { animation: shake 0.45s ease-in-out; }

/* ---- Focus reset ---- */
input:focus, select:focus, textarea:focus, button:focus { outline: none; }

/* ---- Supplier row on mobile ---- */
.supplier-row-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: start;
}

/* ---- Touch-friendly min height ---- */
input, select, textarea, button { min-height: 44px; }
input[type="hidden"] { min-height: 0; }

/* ---- Pricing strip ---- */
.pricing-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

/* ---- Header search on mobile ---- */
#searchInput { font-size: 16px; } /* prevents iOS zoom */

/* ---- Prevent text resize on orientation change ---- */
html { -webkit-text-size-adjust: 100%; }

/* ---- Safe area for notched phones ---- */
#bottomNav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
}
#mainContent {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) {
    #mainContent { padding-bottom: 0; }
}