/**
 * Juwelier De Vaal - Edelmetaal Inkoop App
 * Huisstijl: Donker (#272D30) - zelfde als logo
 */

:root {
    --devaal-donker: #272D30;
    --devaal-donker-light: #3a4245;
    --devaal-accent: #ffffff;
    --devaal-lila: #272D30;
    --devaal-paars: #272D30;
    --devaal-teal: #272D30;
    --devaal-teal-donker: #272D30;
    --gold-color: #272D30;
    --gold-dark: #272D30;
    --silver-color: #6c757d;
    --silver-dark: #6c757d;
    --bs-primary: #272D30;
    --bs-primary-rgb: 39, 45, 48;
}

body { min-height: 100vh; display: flex; flex-direction: column; background-color: #f8f9fa; }
main { flex: 1; }

.navbar { background: var(--devaal-donker) !important; }
.navbar-brand { font-weight: 600; }
.navbar-brand img { height: 40px; width: auto; }
.navbar .nav-link { color: rgba(255,255,255,0.85) !important; }
.navbar .nav-link:hover { color: #ffffff !important; }
.navbar .nav-link.active { color: #ffffff !important; font-weight: 600; }

.card { border: none; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.card-header { font-weight: 600; background: var(--devaal-donker) !important; color: white !important; }
.card-header h5, .card-header h4, .card-header h3, .card-header i { color: white !important; }

.text-gold, .text-devaal-teal, .text-devaal-paars, .text-devaal-lila { color: var(--devaal-donker) !important; }
.bg-gold, .bg-devaal-teal, .bg-devaal-teal-donker, .bg-devaal-donker { background-color: var(--devaal-donker) !important; color: white !important; }
.text-silver { color: var(--silver-color) !important; }
.bg-silver { background-color: var(--silver-color) !important; }

.form-control:focus, .form-select:focus { border-color: var(--devaal-donker); box-shadow: 0 0 0 0.25rem rgba(39, 45, 48, 0.25); }
.gewicht-input { font-weight: 500; font-size: 1.1rem; }

.steen-card { border-left: 4px solid var(--devaal-donker); }
.steen-card .steen-beschrijving { font-size: 0.75rem; line-height: 1.3; margin-top: 0.5rem; }

/* Alle knoppen donker */
.btn-gold, .btn-devaal, .btn-success, .btn-primary { 
    background: var(--devaal-donker) !important; 
    border-color: var(--devaal-donker) !important; 
    color: white !important; 
}
.btn-gold:hover, .btn-devaal:hover, .btn-success:hover, .btn-primary:hover { 
    background: var(--devaal-donker-light) !important; 
    border-color: var(--devaal-donker-light) !important;
    color: white !important; 
}
.btn-outline-primary, .btn-outline-success { 
    color: var(--devaal-donker) !important; 
    border-color: var(--devaal-donker) !important; 
    background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover { 
    background: var(--devaal-donker) !important; 
    color: white !important; 
}

/* Dashboard action cards */
.card .btn-success.w-100, .card .bg-success {
    background: var(--devaal-donker) !important;
    border-color: var(--devaal-donker) !important;
}

.price-display { font-family: 'Courier New', monospace; font-size: 2rem; font-weight: bold; color: var(--devaal-donker); }

.table th { font-weight: 600; background-color: #f8f9fa; }

.footer { font-size: 0.875rem; background: var(--devaal-donker) !important; color: rgba(255,255,255,0.7) !important; }
.footer span { color: rgba(255,255,255,0.7) !important; }

.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; z-index: 9999; }

.photo-preview { position: relative; display: inline-block; }
.photo-preview img { width: 100px; height: 100px; object-fit: cover; border-radius: 0.5rem; }
.photo-preview .remove-btn { position: absolute; top: -5px; right: -5px; width: 24px; height: 24px; border-radius: 50%; background: #dc3545; color: white; border: none; font-size: 12px; cursor: pointer; }

.alert { border-radius: 0.5rem; }

@media print { .navbar, .footer, .btn, .no-print { display: none !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; } }
@media (max-width: 768px) { .gewicht-input { font-size: 1rem; } .price-display { font-size: 1.5rem; } }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease-out; }

.list-group-item-action:hover { background-color: #f8f9fa; }
.card:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; }

code { background-color: #f8f9fa; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; color: var(--devaal-donker); }
.badge { font-weight: 500; }
.input-group-text { background-color: #f8f9fa; }

.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-success { background-color: var(--devaal-donker); color: white; border-color: var(--devaal-donker); }

a { color: var(--devaal-donker); }
a:hover { color: var(--devaal-donker-light); }

/* Login pagina */
.login-container .btn-primary, .login-container .btn-success {
    background: var(--devaal-donker) !important;
    border-color: var(--devaal-donker) !important;
}

/* Radio button check states - specifiek voor betaling keuze */
.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success,
.btn-check:focus + .btn-outline-success {
    background-color: #272D30 !important;
    border-color: #272D30 !important;
    color: white !important;
}

.btn-check + .btn-outline-success {
    border-color: #272D30 !important;
    color: #272D30 !important;
}

.btn-check + .btn-outline-success:hover {
    background-color: rgba(39, 45, 48, 0.1) !important;
}