/* ==========================================================================
   Admin Dashboard Base Styles
   ========================================================================== */
   
.admin-gradient { 
    background: linear-gradient(135deg, #020617 0%, #1e3a8a 100%); 
}

/* Login Box */
.login-wrapper { 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 1rem; 
}

.login-card { 
    background-color: var(--white, #ffffff); 
    padding: 2.5rem; 
    border-radius: 1.5rem; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    width: 100%; 
    max-width: 28rem; 
    transform: scale(0.95); 
    opacity: 0; 
}

.login-title { 
    font-size: 1.875rem; 
    font-weight: 900; 
    text-align: center; 
    margin-bottom: 2rem; 
    color: var(--slate-800, #1e293b); 
    letter-spacing: -0.05em; 
    font-style: italic; 
}

.text-blue-600 { color: var(--blue-600, #2563eb); }

/* Alerts */
.alert-box { 
    padding: 0.75rem; 
    border-radius: 0.5rem; 
    font-size: 0.875rem; 
    font-weight: 700; 
    text-align: center; 
    margin-bottom: 1rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    animation: bounce 1s infinite; 
}

.alert-error { 
    background-color: var(--red-100, #fee2e2); 
    color: var(--red-600, #dc2626); 
}

.alert-success { 
    background-color: var(--blue-600, #2563eb); 
    color: var(--white, #ffffff); 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
}

.alert-error-main { 
    background-color: var(--red-600, #dc2626); 
    color: var(--white, #ffffff); 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
}

/* Login Form */
.login-form { 
    display: flex; 
    flex-direction: column; 
    gap: 1.25rem; 
}

.auth-input { 
    width: 100%; 
    padding: 1rem; 
    border: 1px solid var(--slate-200, #e2e8f0); 
    border-radius: 1rem; 
    transition: all 0.3s; 
    font-family: inherit; 
    box-sizing: border-box;
}

.auth-input:focus { 
    box-shadow: 0 0 0 4px rgba(59,130,246,0.2); 
    transform: translateY(-2px); 
    outline: none; 
}

.btn-auth { 
    width: 100%; 
    background-color: var(--blue-700, #1d4ed8); 
    color: var(--white, #ffffff); 
    font-weight: 900; 
    padding: 1rem; 
    border-radius: 1rem; 
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); 
    transition: background-color 0.3s; 
    cursor: pointer; 
    border: none; 
}

.btn-auth:hover { background-color: var(--blue-800, #1e40af); }

/* Admin Nav */
.admin-nav { 
    padding: 1.5rem; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    position: sticky; 
    top: 0; 
    z-index: 50; 
}

.admin-nav-inner { 
    max-width: 80rem; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.admin-brand { 
    font-size: 1.5rem; 
    font-weight: 900; 
    letter-spacing: -0.05em; 
    font-style: italic; 
    text-transform: uppercase; 
    color: var(--white, #ffffff); 
    margin: 0; 
}

.text-blue-400 { color: var(--blue-400, #60a5fa); }

.btn-logout { 
    background-color: rgba(255,255,255,0.1); 
    padding: 0.5rem 1.5rem; 
    border-radius: 9999px; 
    font-size: 0.625rem; 
    font-weight: 900; 
    letter-spacing: 0.1em; 
    text-transform: uppercase; 
    transition: background-color 0.3s; 
    color: var(--white, #ffffff); 
    text-decoration: none; 
}

.btn-logout:hover { background-color: var(--red-500, #ef4444); }

/* Dashboard Layout */
.admin-dashboard { 
    max-width: 80rem; 
    margin: 0 auto; 
    padding: 1.5rem; 
}

@media (min-width: 1024px) { 
    .admin-dashboard { padding: 3rem; } 
}

.management-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 2rem; 
    margin-bottom: 4rem; 
}

@media (min-width: 1024px) { 
    .management-grid { grid-template-columns: repeat(3, 1fr); } 
}

/* Admin Cards */
.admin-card { 
    background-color: var(--white, #ffffff); 
    padding: 2rem; 
    border-radius: 2.5rem; 
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); 
    border: 1px solid var(--slate-100, #f1f5f9); 
    opacity: 0; 
}

.admin-card-title { 
    font-size: 1.25rem; 
    font-weight: 900; 
    margin-bottom: 2rem; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    display: flex; 
    align-items: center; 
}

.title-slate { color: var(--slate-700, #334155); } 
.title-slate i { color: var(--blue-600, #2563eb); margin-right: 0.75rem; }
.title-green { color: var(--green-600, #16a34a); } 
.title-green i { margin-right: 0.75rem; }
.title-purple { color: var(--purple-600, #9333ea); } 
.title-purple i { margin-right: 0.75rem; }

/* Admin Forms */
.admin-form { 
    display: flex; 
    flex-direction: column; 
    gap: 1.25rem; 
}

.form-label { 
    display: block; 
    font-size: 0.625rem; 
    font-weight: 700; 
    color: var(--slate-400, #94a3b8); 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    margin-bottom: 0.5rem; 
    margin-left: 0.25rem; 
}

.form-control { 
    width: 100%; 
    padding: 1rem; 
    background-color: var(--slate-50, #f8fafc); 
    border: 1px solid var(--slate-200, #e2e8f0); 
    border-radius: 0.75rem; 
    transition: all 0.3s; 
    font-family: inherit; 
    outline: none; 
    box-sizing: border-box; 
}

.form-control:focus { 
    box-shadow: 0 0 0 2px var(--blue-500, #3b82f6); 
    background-color: var(--white, #ffffff); 
}

textarea.form-control { resize: none; }

.form-file-box { 
    padding: 1rem; 
    border-radius: 1rem; 
    border: 2px dashed; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.box-green { background-color: rgba(240,253,244,0.5); border-color: var(--green-200, #bbf7d0); }
.box-purple { background-color: rgba(250,245,255,0.5); border-color: var(--purple-200, #e9d5ff); }
.box-blue { background-color: var(--blue-50, #eff6ff); border-color: var(--blue-200, #bfdbfe); }

.file-lbl { font-size: 0.625rem; font-weight: 900; text-transform: uppercase; margin-bottom: 0.5rem; }
.lbl-green { color: var(--green-600, #16a34a); } 
.lbl-purple { color: var(--purple-600, #9333ea); } 
.lbl-blue { color: var(--blue-400, #60a5fa); }

.file-input { 
    font-size: 0.75rem; 
    color: var(--slate-500, #64748b); 
    width: 100%; 
    cursor: pointer; 
}

.file-input::file-selector-button { 
    margin-right: 1rem; 
    padding: 0.5rem 1rem; 
    border-radius: 9999px; 
    border: none; 
    color: var(--white, #ffffff); 
    cursor: pointer; 
    transition: background-color 0.3s; 
    font-weight: bold; 
}

.file-green::file-selector-button { background-color: var(--green-600, #16a34a); } 
.file-green::file-selector-button:hover { background-color: var(--green-700, #15803d); }
.file-purple::file-selector-button { background-color: var(--purple-600, #9333ea); } 
.file-purple::file-selector-button:hover { background-color: var(--purple-700, #7e22ce); }
.file-blue::file-selector-button { background-color: var(--blue-600, #2563eb); padding: 0.75rem 1.5rem; } 
.file-blue::file-selector-button:hover { background-color: var(--blue-700, #1d4ed8); }

.btn-admin { 
    width: 100%; 
    padding: 1rem; 
    border-radius: 1rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    font-size: 0.75rem; 
    color: var(--white, #ffffff); 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); 
    transition: background-color 0.3s; 
    border: none; 
    cursor: pointer; 
}

.btn-dark { background-color: var(--slate-900, #0f172a); } 
.btn-dark:hover { background-color: var(--blue-700, #1d4ed8); }
.btn-green { background-color: var(--green-600, #16a34a); } 
.btn-green:hover { background-color: var(--green-700, #15803d); }
.btn-purple { background-color: var(--purple-600, #9333ea); margin-top: 1rem; } 
.btn-purple:hover { background-color: var(--purple-700, #7e22ce); }

/* Inventory Tables */
.inventory-card { 
    background-color: var(--white, #ffffff); 
    border-radius: 2.5rem; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    border: 1px solid var(--slate-100, #f1f5f9); 
    overflow: hidden; 
    margin-bottom: 2.5rem; 
    opacity: 0; 
}

.inv-header { 
    padding: 2.5rem; 
    background-color: var(--slate-900, #0f172a); 
    color: var(--white, #ffffff); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.inv-title { 
    font-size: 1.5rem; 
    font-weight: 900; 
    font-style: italic; 
    letter-spacing: -0.05em; 
    text-transform: uppercase; 
    margin: 0; 
}

.inv-subtitle { 
    font-size: 0.625rem; 
    font-weight: 700; 
    letter-spacing: 0.3em; 
    text-transform: uppercase; 
    margin-top: 0.25rem; 
    margin-bottom: 0;
}

.sub-blue { color: var(--blue-400, #60a5fa); } 
.sub-purple { color: var(--purple-400, #c084fc); }

.inv-count { 
    padding: 0.5rem 1.5rem; 
    border-radius: 9999px; 
    font-weight: 900; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
}

.count-blue { background-color: var(--blue-600, #2563eb); } 
.count-purple { background-color: var(--purple-600, #9333ea); }

.table-wrap { overflow-x: auto; width: 100%; }

.data-table { 
    width: 100%; 
    border-collapse: collapse; 
}

.data-table th { 
    background-color: var(--slate-50, #f8fafc); 
    color: var(--slate-400, #94a3b8); 
    font-size: 0.625rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    padding: 2rem; 
    border-bottom: 1px solid var(--slate-200, #e2e8f0); 
    text-align: left; 
}

.th-center { text-align: center !important; } 
.th-right { text-align: right !important; }

.data-table tbody tr { 
    border-bottom: 1px solid var(--slate-100, #f1f5f9); 
    transition: background-color 0.3s; 
}

.data-table tbody tr:hover { background-color: rgba(248,250,252,0.8); }

.data-table td { 
    padding: 2rem; 
    vertical-align: middle; 
}

.td-center { text-align: center; } 
.td-right { text-align: right; }

.td-img-large { 
    width: 5rem; 
    height: 5rem; 
    border-radius: 1rem; 
    overflow: hidden; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); 
    border: 4px solid var(--white, #ffffff); 
    transition: transform 0.5s; 
}

.data-table tr:hover .td-img-large { transform: scale(1.1); }

.td-img-large img, .td-img-small img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.td-img-small { 
    width: 8rem; 
    height: 5rem; 
    border-radius: 0.75rem; 
    overflow: hidden; 
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); 
    border: 2px solid var(--white, #ffffff); 
}

.item-title { 
    font-weight: 900; 
    color: var(--slate-800, #1e293b); 
    text-transform: uppercase; 
    font-size: 1.125rem; 
    line-height: 1; 
    margin-bottom: 0.25rem; 
}

.item-loc { 
    font-size: 0.625rem; 
    color: var(--slate-400, #94a3b8); 
    font-weight: 900; 
    text-transform: uppercase; 
    display: flex; 
    align-items: center; 
}

.item-loc i { margin-right: 0.25rem; }

.mach-item-title { 
    font-weight: 700; 
    color: var(--slate-800, #1e293b); 
    text-transform: uppercase; 
    font-size: 0.875rem; 
}

.status-badge { 
    padding: 0.5rem 1.25rem; 
    border-radius: 0.75rem; 
    font-size: 0.625rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); 
    display: inline-block; 
}

.status-completed { background-color: var(--green-100, #dcfce3); color: var(--green-700, #15803d); }
.status-progress { background-color: var(--blue-100, #dbeafe); color: var(--blue-700, #1d4ed8); }

.action-btns { 
    display: flex; 
    justify-content: flex-end; 
    gap: 0.75rem; 
}

.btn-icon { 
    width: 3rem; 
    height: 3rem; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background-color: var(--white, #ffffff); 
    border: 1px solid var(--slate-100, #f1f5f9); 
    border-radius: 1rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    transition: all 0.3s; 
    cursor: pointer; 
    text-decoration: none; 
}

.btn-edit { color: var(--blue-600, #2563eb); } 
.btn-edit:hover { background-color: var(--blue-600, #2563eb); color: var(--white, #ffffff); }
.btn-del { color: var(--red-500, #ef4444); } 
.btn-del:hover { background-color: var(--red-600, #dc2626); color: var(--white, #ffffff); }
.btn-icon-sm { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }

/* Modal */
.modal-overlay { 
    display: none; 
    position: fixed; 
    inset: 0; 
    z-index: 100; 
    align-items: center; 
    justify-content: center; 
    padding: 1rem; 
    background-color: rgba(15,23,42,0.9); 
    backdrop-filter: blur(12px); 
    width: 100vw; 
    height: 100vh; 
    top: 0; 
    left: 0; 
}

.modal-overlay.active { display: flex; }

.modal-content { 
    background-color: var(--white, #ffffff); 
    border-radius: 3rem; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    width: 100%; 
    max-width: 42rem; 
    overflow: hidden; 
    transform: scale(0.75); 
    opacity: 0; 
}

.modal-header { 
    padding: 2rem; 
    color: var(--white, #ffffff); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin: 0; 
}

.modal-title { 
    font-size: 1.25rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    font-style: italic; 
    margin: 0; 
}

.modal-subtitle { 
    color: var(--blue-400, #60a5fa); 
    font-size: 0.625rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    margin-top: 0.25rem; 
    margin-bottom: 0; 
}

.btn-close { 
    width: 3rem; 
    height: 3rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: rgba(255,255,255,0.1); 
    border-radius: 50%; 
    color: var(--white, #ffffff); 
    transition: all 0.5s; 
    font-size: 1.25rem; 
    border: none; 
    cursor: pointer; 
}

.btn-close:hover { 
    transform: rotate(90deg); 
    background-color: var(--red-500, #ef4444); 
}

.modal-body { padding: 2.5rem; }

.modal-row-head { 
    display: flex; 
    gap: 2rem; 
    align-items: flex-start; 
    margin-bottom: 1rem; 
}

.modal-img-wrap { 
    width: 8rem; 
    height: 8rem; 
    border-radius: 1.5rem; 
    overflow: hidden; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    border: 4px solid var(--slate-50, #f8fafc); 
    flex-shrink: 0; 
}

.modal-img-wrap img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.modal-fields-col { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}

.modal-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 1.5rem; 
}

.col-span-2 { grid-column: span 2 / span 2; }

.modal-actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: 1rem; 
    padding-top: 1.5rem; 
}

.btn-dismiss { 
    padding: 0.75rem 2rem; 
    color: var(--slate-400, #94a3b8); 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    font-size: 0.625rem; 
    border: none; 
    background: transparent; 
    cursor: pointer; 
}

.btn-execute { 
    padding: 1rem 3rem; 
    background-color: var(--blue-800, #1e40af); 
    color: var(--white, #ffffff); 
    border-radius: 1rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    font-size: 0.625rem; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    transition: background-color 0.3s; 
    border: none; 
    cursor: pointer; 
}

.btn-execute:hover { background-color: var(--blue-900, #1e3a8a); }


/* ==========================================================================
   Admin Dashboard Responsive Overrides
   ========================================================================== */

.admin-form-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 1rem; 
}

@media (max-width: 1024px) {
    .management-grid { 
        grid-template-columns: 1fr; 
    }
}

@media (max-width: 768px) {
    /* Navbar & Layout padding */
    .admin-nav-inner { 
        flex-direction: column; 
        text-align: center; 
        gap: 1rem; 
    }
    .admin-dashboard { 
        padding: 1rem; 
    }
    
    /* Forms */
    .admin-form-grid { 
        grid-template-columns: 1fr; 
    }
    .admin-card { 
        padding: 1.5rem; 
    }
    
    /* Table Cards */
    .inv-header { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 1rem; 
        padding: 1.5rem; 
    }
    .inv-count { 
        align-self: flex-start; 
    }
    .data-table th, .data-table td { 
        padding: 1rem; 
    }
    
    /* Modal Resizing */
    .modal-content { 
        max-height: 90vh; 
        overflow-y: auto; 
    }
    .modal-row-head { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }
    .modal-fields-col { 
        width: 100%; 
    }
    .modal-grid { 
        grid-template-columns: 1fr !important; 
    }
    .col-span-2 { 
        grid-column: span 1 / span 1 !important; 
    }
    .modal-actions { 
        flex-direction: column-reverse; 
        width: 100%; 
        gap: 0.5rem; 
    }
    .btn-execute, .btn-dismiss { 
        width: 100%; 
        text-align: center; 
        justify-content: center; 
    }
    .modal-header, .modal-body { 
        padding: 1.5rem; 
    }
}

@media (max-width: 480px) {
    /* Mobile specifically */
    .login-card { 
        padding: 1.5rem; 
    }
    .data-table th, .data-table td { 
        padding: 0.75rem; 
        font-size: 0.8rem; 
    }
    .td-img-large { 
        width: 4rem; 
        height: 4rem; 
    }
    .action-btns { 
        flex-direction: column; 
        gap: 0.5rem; 
    }
    .btn-icon { 
        width: 2.5rem; 
        height: 2.5rem; 
    }
    .item-title { 
        font-size: 1rem; 
    }
}