/* style.css */

/* Basic font smoothing */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #0f172a; /* slate-900 */
    background-image: radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.1), transparent 50%);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Tab styling */
.tab-button.active { background-color: #2563eb; color: white; } /* blue-600 */

/* --- Role-based visibility helpers --- */
.admin-only { display: none; }
body.is-admin .admin-only { display: flex; }

.client-only { display: none; }
body.is-client .client-only { display: flex; }

.logged-in-only { display: none; }
body.is-admin .logged-in-only,
body.is-client .logged-in-only {
    display: flex;
}
/* --- End of visibility helpers --- */

/* Cart Button & Badge */
.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background-color: #ef4444; /* red-500 */
    color: white;
    font-size: 10px;
    font-weight: bold;
}

/* Modal Styling */
.modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 50; display: flex; justify-content: center; align-items: center; padding: 1rem; }
.modal-container { border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.modal-footer { padding: 1rem; background-color: rgba(15, 23, 42, 0.5); display: flex; justify-content: flex-end; gap: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.modal-cancel-button { padding: 0.5rem 1.5rem; border-radius: 0.375rem; color: white; background-color: #475569; transition: background-color 0.2s; }
.modal-cancel-button:hover { background-color: #64748b; }
.modal-confirm-button { padding: 0.5rem 1.5rem; border-radius: 0.375rem; color: white; background-color: #2563eb; font-weight: 600; transition: background-color 0.2s; } /* blue-600 */
.modal-confirm-button:hover { background-color: #3b82f6; } /* blue-500 */

/* Form Input */
.form-input { width: 100%; background-color: rgba(30, 41, 59, 0.5); color: white; border-radius: 0.375rem; padding: 0.75rem; border: 1px solid #475569; }
.form-input::placeholder { color: #94a3b8; }
.form-input:focus { outline: none; box-shadow: 0 0 0 2px #3b82f6; border-color: #3b82f6; } /* blue-500 */

/* --- Stock Card Layout --- */
.stock-card {
    background-color: rgba(30, 41, 59, 0.5); /* bg-slate-800/50 */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #334155; /* border-slate-700 */
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}
.stock-card:hover { border-color: rgba(14, 165, 233, 0.5); } /* hover:border-sky-500/50 */

.stock-card .item-image-container {
    position: relative;
    width: 100%;
    height: 6rem; /* h-24 */
    margin-bottom: 0.5rem; /* mb-2 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #0f172a; /* bg-slate-900 */
    overflow: hidden;
}
.stock-card .item-image { width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; }
.stock-card .item-info { flex-grow: 1; }
.stock-card .item-name { font-weight: bold; color: white; font-size: 1rem; }
.stock-card .item-quantity {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    font-family: monospace;
    border-radius: 9999px;
    background-color: rgba(14, 165, 233, 0.1); /* bg-sky-500/10 */
    color: #38bdf8; /* text-sky-400 */
}
.stock-card .item-description { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }
.stock-card .item-price { margin-top: 0.25rem; }
.stock-card .item-controls { margin-top: auto; padding-top: 0.5rem; }

/* --- Fix for pixelated image scaling & JIT Race Condition --- */
.item-image {
    /* Explicit sizing to prevent layout shifts on first load */
    width: 4rem;  /* 64px */
    height: 4rem; /* 64px */

    /* Pixelated rendering for sharp edges */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Explicit sizing for the diamond icon to prevent layout shifts */
.diamond-icon {
    width: 1rem;  /* 16px */
    height: 1rem; /* 16px */
}

/* --- Mass Edit Mode Visibility --- */
body:not(.in-mass-edit) #mass-edit-controls {
    display: none;
}

body.in-mass-edit #stock-view-header,
body.in-mass-edit #stock-search-container,
body.in-mass-edit #stock-category-filters {
    display: none;
}

body.in-mass-edit #mass-edit-controls {
    display: flex;
}