/* global-ui.css
  Standardized Glassmorphic OS UI components (True Dark Default).
  Linked via fragments/theme-header.html 
*/

/* 1. Global Font and Body Base */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap');

body {
    font-family: var(--theme-font, 'Outfit', sans-serif);
    
    /* True Dark Mode: Deep Black with Ambient Light Swirls */
    background-color: var(--theme-bg-base, #050505);
    background-image: var(--theme-bg-image, 
        radial-gradient(circle at center, #121212 0%, #050505 100%),
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.03), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.02), transparent 25%)
    );
    
    color: var(--theme-text-main, #d1d5db);
}

/* 2. The Glass Panel Container */
.glass-panel {
    background: var(--theme-bg-card, rgba(20, 20, 20, 0.6));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.03));
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
}

/* 3. The Action Button (Pill Shape) */
.glass-btn {
    background: var(--theme-bg-card, rgba(10, 10, 10, 0.5));
    color: var(--theme-text-muted, #6b7280);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.05));
    padding: 10px 20px;
    border-radius: 30px; 
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: inline-block;
    text-align: center;
}

.glass-btn:hover {
    background: var(--theme-bg-hover, rgba(30, 30, 30, 0.8));
    color: var(--theme-text-main, #d1d5db);
    border-color: var(--theme-border-hover, rgba(255, 255, 255, 0.1));
    transform: translateY(-2px);
}

/* 4. Icon Buttons (For tiny + and - inventory buttons) */
.glass-icon-btn {
    background: var(--theme-bg-card, rgba(10, 10, 10, 0.5));
    color: var(--theme-text-main, #d1d5db);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.05));
    width: 35px; 
    height: 35px; 
    border-radius: 50%; /* Perfect circle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.glass-icon-btn:hover {
    background: var(--theme-bg-hover, rgba(30, 30, 30, 0.8));
    border-color: var(--theme-border-hover, rgba(255, 255, 255, 0.1));
    transform: translateY(-2px);
}

/* 5. Admin Data Tables */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border, rgba(255, 255, 255, 0.05));
}

th {
    font-weight: 500;
    color: var(--theme-text-muted, #9ca3af);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* 6. Form Inputs & Dropdowns */
input[type="text"], 
input[type="password"],
input[type="url"],
input[type="date"],
input[type="number"], 
select {
    background: rgba(10, 10, 10, 0.6);
    color: var(--theme-text-main, #d1d5db);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 12px 15px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-sizing: border-box;
}

input:focus, select:focus {
    border-color: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
    background: rgba(20, 20, 20, 0.8);
}

select option {
    background: #121212;
    color: #d1d5db;
}