/*
 * site.css
 * Style global pour l'application Gestion Fabrication Camsight
 * Compatible Bootstrap 5 et vues Razor ASP.NET Core
 *
 * Principes :
 * - Typographie Century Gothic avec fallbacks web-safe
 * - Interface claire, industrielle, sobre
 * - Couleurs inspirées de l'identité Bertin Technologies
 * - Composants réutilisables pour formulaires, tableaux, cards et actions
 */

:root { /* Palette principale */ --bt-primary: #0055a4; --bt-primary-dark: #003b73; --bt-primary-soft: #e8f2fb; --bt-secondary: #00a3e0; --bt-secondary-dark: #007cad; --bt-secondary-soft: #e6f7fd; /* Neutres */ --bt-bg: #f5f8fb; --bt-surface: #ffffff; --bt-surface-muted: #f8fbfd; --bt-text: #273142; --bt-muted: #6c7a89; --bt-border: #d8e2ec; /* Etats */ --bt-success: #198754; --bt-success-soft: #e8f6ee; --bt-danger: #dc3545; --bt-danger-soft: #fdecef; --bt-warning: #f0ad4e; --bt-warning-soft: #fff6e8; --bt-info: #0dcaf0; --bt-info-soft: #e8fbff; /* Layout */ --bt-radius-sm: 0.5rem; --bt-radius: 0.85rem; --bt-radius-lg: 1.15rem; --bt-shadow-sm: 0 4px 14px rgba(0, 59, 115, 0.06); --bt-shadow: 0 12px 32px rgba(0, 59, 115, 0.08); --bt-shadow-hover: 0 16px 40px rgba(0, 59, 115, 0.16); /* Focus accessible */ --bt-focus-ring: 0 0 0 0.25rem rgba(0, 163, 224, 0.18); }

html { min-height: 100%; scroll-behavior: smooth; }

body { min-height: 100vh; margin: 0; font-family: "Century Gothic", "Segoe UI", Arial, sans-serif; font-size: 0.95rem; color: var(--bt-text); background: radial-gradient(circle at top right, rgba(0, 163, 224, 0.12), transparent 32rem), linear-gradient(180deg, #ffffff 0%, var(--bt-bg) 52%, #eef4f8 100%); }

/* Accessibilité */
.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

    .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 0.75rem; background: var(--bt-surface); color: var(--bt-primary-dark); border: 2px solid var(--bt-secondary); border-radius: var(--bt-radius-sm); z-index: 2000; }

:focus-visible { outline: none; box-shadow: var(--bt-focus-ring); }

/* Typographie */
h1,
h2,
h3,
h4,
h5,
h6 { color: var(--bt-primary-dark); font-weight: 700; letter-spacing: -0.02em; }

p { color: var(--bt-text); }

.text-muted,
.small-muted { color: var(--bt-muted) !important; }

.section-title { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; color: var(--bt-primary-dark); font-size: 1.05rem; font-weight: 700; }

    .section-title i { color: var(--bt-secondary); font-size: 1.2rem; }

/* Shell application */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.app-header { position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--bt-border); backdrop-filter: blur(12px); }

.app-main { flex: 1; padding: 2rem 0 3rem; }

.app-footer { padding: 1rem 0 1.5rem; color: var(--bt-muted); font-size: 0.85rem; }

.brand-logo { height: 44px; width: auto; object-fit: contain; }

.brand-separator { width: 1px; height: 36px; background: var(--bt-border); }

.app-title { display: block; color: var(--bt-primary-dark); font-weight: 700; line-height: 1.2; }

.app-version { display: block; color: var(--bt-muted); font-size: 0.875rem; }

/* Cards et panneaux */
.page-card,
.bt-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius-lg); box-shadow: var(--bt-shadow); overflow: hidden; }

.bt-card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--bt-border); background: linear-gradient(180deg, #ffffff, var(--bt-surface-muted)); }

.bt-card-body { padding: 1.5rem; }

.hero-section { padding: 2rem; color: #ffffff; background: linear-gradient(135deg, rgba(0, 85, 164, 0.97), rgba(0, 163, 224, 0.92)), linear-gradient(45deg, var(--bt-primary), var(--bt-secondary)); }

    .hero-section h1,
    .hero-section h2,
    .hero-section h3,
    .hero-section p { color: #ffffff; }

.hero-subtitle { opacity: 0.9; }

.module-card { height: 100%; padding: 1.25rem; border: 1px solid var(--bt-border); border-radius: var(--bt-radius); background: var(--bt-surface); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }

    .module-card:hover { transform: translateY(-3px); box-shadow: var(--bt-shadow-hover); border-color: rgba(0, 163, 224, 0.35); }

.module-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: #ffffff; background: linear-gradient(135deg, var(--bt-primary), var(--bt-secondary)); border-radius: 14px; font-size: 1.35rem; }

.status-card { height: 100%; padding: 1rem; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); }

.status-label { display: block; margin-bottom: 0.25rem; color: var(--bt-muted); font-size: 0.82rem; }

.status-value { color: var(--bt-primary-dark); font-size: 1.15rem; font-weight: 700; }

/* Formulaires */
.form-label { margin-bottom: 0.4rem; color: var(--bt-primary-dark); font-weight: 600; }

.form-text { color: var(--bt-muted); }

.form-control,
.form-select { min-height: 2.65rem; color: var(--bt-text); background-color: #ffffff; border-color: var(--bt-border); border-radius: 0.75rem; padding: 0.65rem 0.9rem; font-size: 0.95rem; }

    .form-control:hover,
    .form-select:hover { border-color: rgba(0, 163, 224, 0.7); }

    .form-control:focus,
    .form-select:focus { border-color: var(--bt-secondary); box-shadow: var(--bt-focus-ring); }

    .form-control:disabled,
    .form-select:disabled,
    .form-control[readonly] { color: var(--bt-muted); background-color: #eef3f7; border-color: #d5dee8; }

.input-group-text { color: var(--bt-primary-dark); background: var(--bt-primary-soft); border-color: var(--bt-border); border-radius: 0.75rem; }

.required::after { content: " *"; color: var(--bt-danger); font-weight: 700; }

/* Boutons */
.btn { border-radius: 0.8rem; font-weight: 600; transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease; }

    .btn:hover { transform: translateY(-1px); }

    .btn:focus-visible { box-shadow: var(--bt-focus-ring); }

.btn-bt { --bs-btn-color: #ffffff; --bs-btn-bg: var(--bt-primary); --bs-btn-border-color: var(--bt-primary); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--bt-primary-dark); --bs-btn-hover-border-color: var(--bt-primary-dark); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--bt-primary-dark); --bs-btn-active-border-color: var(--bt-primary-dark); --bs-btn-disabled-color: #ffffff; --bs-btn-disabled-bg: #9fb7ce; --bs-btn-disabled-border-color: #9fb7ce; padding: 0.65rem 1rem; }

.btn-bt-secondary { --bs-btn-color: #ffffff; --bs-btn-bg: var(--bt-secondary); --bs-btn-border-color: var(--bt-secondary); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--bt-secondary-dark); --bs-btn-hover-border-color: var(--bt-secondary-dark); padding: 0.65rem 1rem; }

.btn-bt-outline { --bs-btn-color: var(--bt-primary); --bs-btn-bg: #ffffff; --bs-btn-border-color: rgba(0, 85, 164, 0.28); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--bt-primary); --bs-btn-hover-border-color: var(--bt-primary); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--bt-primary-dark); --bs-btn-active-border-color: var(--bt-primary-dark); padding: 0.65rem 1rem; }

.btn-danger-soft { color: var(--bt-danger); background: var(--bt-danger-soft); border-color: rgba(220, 53, 69, 0.22); }

    .btn-danger-soft:hover,
    .btn-danger-soft:focus { color: #ffffff; background: var(--bt-danger); border-color: var(--bt-danger); }

.btn-success-soft { color: var(--bt-success); background: var(--bt-success-soft); border-color: rgba(25, 135, 84, 0.22); }

    .btn-success-soft:hover,
    .btn-success-soft:focus { color: #ffffff; background: var(--bt-success); border-color: var(--bt-success); }

/* Badges */
.badge-bt { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--bt-primary-dark); background: var(--bt-primary-soft); border: 1px solid rgba(0, 85, 164, 0.14); border-radius: 999px; padding: 0.45rem 0.75rem; font-weight: 600; }

.badge-status-success { color: var(--bt-success); background: var(--bt-success-soft); }

.badge-status-danger { color: var(--bt-danger); background: var(--bt-danger-soft); }

.badge-status-warning { color: #936000; background: var(--bt-warning-soft); }

/* Tableaux */
.table-wrapper { overflow: hidden; border: 1px solid var(--bt-border); border-radius: var(--bt-radius); background: var(--bt-surface); }

.table-responsive { border-radius: var(--bt-radius); }

.table.bt-table { margin-bottom: 0; vertical-align: middle; }

    .table.bt-table thead th { color: var(--bt-primary-dark); background: var(--bt-primary-soft); border-bottom: 1px solid var(--bt-border); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }

    .table.bt-table tbody td { color: var(--bt-text); border-color: #edf2f6; }

    .table.bt-table tbody tr:hover { background: var(--bt-secondary-soft); }

.table-actions { display: flex; justify-content: flex-end; gap: 0.5rem; white-space: nowrap; }

/* Navigation secondaire et onglets */
.nav-pills .nav-link { color: var(--bt-primary-dark); border-radius: 999px; font-weight: 600; }

    .nav-pills .nav-link:hover,
    .nav-pills .nav-link:focus { background: var(--bt-primary-soft); }

    .nav-pills .nav-link.active { color: #ffffff; background: var(--bt-primary); }

/* Alertes */
.alert { border-radius: var(--bt-radius); border-width: 1px; }

.alert-bt-info { color: var(--bt-primary-dark); background: var(--bt-info-soft); border-color: rgba(13, 202, 240, 0.28); }

/* Helpers de layout */
.content-section { padding: 1.5rem; }

    .content-section + .content-section { border-top: 1px solid var(--bt-border); }

.action-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; padding-top: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--bt-border); }

.scan-field { max-width: 28rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

/* Etats métier */
.state-pass { color: var(--bt-success); font-weight: 700; }

.state-fail { color: var(--bt-danger); font-weight: 700; }

.state-pending { color: #936000; font-weight: 700; }

/* Responsive */
@media (max-width: 991.98px) {
    .app-main { padding: 1.25rem 0 2rem; }

    .hero-section,
    .content-section,
    .bt-card-body { padding: 1.25rem; }

    .kpi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    body { font-size: 0.92rem; }

    .brand-logo { height: 36px; }

    .brand-separator { display: none; }

    .app-title { font-size: 1rem; }

    .action-bar { justify-content: stretch; }

        .action-bar .btn { width: 100%; }
}