/* =========================================
   ONHOST - CORE COMPONENTS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root { 
    --bg: #050505; 
    --panel: #0a0a0b; 
    --panel-light: #121214; 
    --accent: #ff6600; 
    --accent-hover: #e65c00; 
    --border: #27272a; 
    --text: #ededed; 
    --text-muted: #a1a1aa; 
    --success: #10b981;
    --danger: #ef4444;
}

body { 
    font-family: 'Inter', sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    margin: 0; 
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Typografia */
h1, h2, h3, h4 { margin-top: 0; color: #ffffff; }
p { color: var(--text-muted); }

/* Globálne Tlačidlá */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px;
    cursor: pointer; text-decoration: none; transition: all 0.2s ease; border: none;
    font-family: 'Inter', sans-serif; box-sizing: border-box;
}

.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-outline { background: transparent; border: 1px solid var(--border); color: white; }
.btn-outline:hover { background: var(--panel-light); border-color: #3f3f46; }

.btn-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

/* Vstupné polia (Inputs) */
.form-control {
    width: 100%; padding: 12px 15px; background: var(--panel); border: 1px solid var(--border);
    color: white; border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease; box-sizing: border-box;
}
.form-control:focus { outline: none; border-color: var(--accent); }

/* --- ŠPECIFICKÉ TLAČIDLÁ A IKONY (Oprava) --- */
.btn-manage { background: transparent; border: 1px solid var(--border); color: white; padding: 0 20px; height: 36px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-manage:hover { background: #1f1f22; border-color: #3f3f46; }

.btn-renew { background: var(--accent); color: white; border: none; padding: 0 20px; height: 36px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn-renew:hover { background: var(--accent-hover); }

.btn-icon { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; text-decoration: none; }
.btn-icon:hover { background: #1f1f22; color: white; border-color: #3f3f46; }
.btn-icon svg { width: 16px; height: 16px; fill: currentColor; } /* Toto opraví tie obrovské čierne ikony! */

/* Stav pre čakajúce služby vo fronte */
.status-warning {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}