/**
 * Custom CSS for StockAreaManager
 * Zone page styling and card overrides
 */

/* ============================================
   Jost Font - Google Fonts
   ============================================ */

body {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
}

/* ============================================
   Card Title Styling - Override Bootstrap
   ============================================ */

/* Zone name uses H5 with bold font weight */
.card h5.card-header {
    font-weight: 700 !important;
}

/* Zone card container */
.zone-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zone-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Debug Helper Styles
   ============================================ */

/* Visual indicator when JS is loading */
.js-loading .zone-content {
    opacity: 0;
}

/* Show content when JS has initialized */
.js-loaded .zone-content {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ============================================
   Admin-Only Elements
   ============================================ */

/* Hide admin-only elements by default - auth-nav.js will show them for admins */
.admin-only {
    display: none;
}

/* ============================================
   Sidebar Logo Styling - Fill Width
   ============================================ */

/* Make logo-lg fill the sidebar width */
.vertical-menu .navbar-brand-box .logo .logo-lg {
    display: block;
    width: 100%;
}

.vertical-menu .navbar-brand-box .logo .logo-lg img {
    width: calc(100% - 20px);
    height: auto;
    margin: 0 10px;
}

/* Add padding to sidebar content */
.vertical-menu .navbar-brand-box {
    padding-top: 10px;
}

.vertical-menu .sidebar-menu-scroll {
    padding-top: 10px;
}

/* ============================================
   Search Input with Clear Button
   ============================================ */

/* Position the search input wrapper */
.search-input-wrapper {
    position: relative;
    width: 100%;
}

/* Style the search input to accommodate the clear button */
.search-input-wrapper .form-control {
    padding-right: 40px;
}

/* Clear button inside search input */
.search-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 18px;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
}

.search-clear-btn:hover {
    opacity: 1;
    color: #495057;
}

.search-clear-btn:focus {
    outline: none;
}

/* Hide clear button when input is empty */
.search-input-wrapper .form-control:invalid ~ .search-clear-btn,
.search-input-wrapper .form-control:valid:not(:placeholder-shown) ~ .search-clear-btn,
.search-input-wrapper.has-value .search-clear-btn {
    display: block;
}

.search-input-wrapper:not(.has-value) .search-clear-btn {
    display: none;
}