/* ─── Capri Dashboard – Identidade visual baseada em anilhascapri.com.br ─── */

:root {
    --capri-green:        #2d5f4a;
    --capri-green-light:  #3a7a5e;
    --capri-green-bright: #2d8659;
    --capri-charcoal:     #3a3a3a;
    --capri-gold:         #f5c542;
    --capri-bg:           #f5f5f5;
    --capri-white:        #ffffff;
    --capri-border:       #d8e6df;
    --shadow-sm:          0 2px 6px rgba(45, 95, 74, .12);
    --shadow-md:          0 4px 16px rgba(45, 95, 74, .16);
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
html { font-size: 15px; }
body {
    background: var(--capri-bg);
    color: var(--capri-charcoal);
    font-family: 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

/* ─── Topbar (above navbar) ─────────────────────────────────────────────── */
.capri-topbar {
    background: var(--capri-charcoal);
    color: #ccc;
    font-size: .78rem;
    padding: .35rem 0;
}
.capri-topbar a { color: #ccc; text-decoration: none; }
.capri-topbar a:hover { color: var(--capri-gold); }

/* ─── Navbar ────────────────────────────────────────────────────────────── */
.navbar-capri {
    background: var(--capri-green) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.navbar-capri .navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--capri-white) !important;
    letter-spacing: .5px;
}
.navbar-capri .navbar-brand span {
    color: var(--capri-gold);
}
.navbar-capri .nav-link {
    color: rgba(255,255,255,.85) !important;
    font-size: .88rem;
    font-weight: 500;
    padding: .55rem .85rem !important;
    transition: color .15s, background .15s;
    border-radius: 4px;
}
.navbar-capri .nav-link:hover,
.navbar-capri .nav-link.active {
    color: var(--capri-white) !important;
    background: rgba(255,255,255,.12);
}
.navbar-capri .nav-link i { margin-right: .3rem; }

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--capri-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    background: var(--capri-white);
}
.card-header {
    background: linear-gradient(135deg, var(--capri-green) 0%, var(--capri-green-light) 100%);
    color: var(--capri-white);
    border-radius: 7px 7px 0 0 !important;
    border-bottom: none;
    font-weight: 600;
    padding: .75rem 1.1rem;
}
.card-header .badge { font-size: .75rem; }

/* ─── Botões ─────────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--capri-green);
    border-color: var(--capri-green);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--capri-green-light);
    border-color: var(--capri-green-light);
}
.btn-success {
    background: var(--capri-green-bright);
    border-color: var(--capri-green-bright);
}
.btn-outline-primary {
    color: var(--capri-green);
    border-color: var(--capri-green);
}
.btn-outline-primary:hover {
    background: var(--capri-green);
    border-color: var(--capri-green);
}

/* ─── Badges personalizados ─────────────────────────────────────────────── */
.badge-capri-green  { background: var(--capri-green);  color: #fff; }
.badge-capri-gold   { background: var(--capri-gold);   color: var(--capri-charcoal); }

/* ─── Tabelas ────────────────────────────────────────────────────────────── */
.table thead th {
    background: var(--capri-green);
    color: var(--capri-white);
    border-color: var(--capri-green-light);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}
.table tbody tr:hover { background: #edf5f1; }
.table td, .table th { vertical-align: middle; }

/* ─── Alertas ────────────────────────────────────────────────────────────── */
.alert-success {
    background: #e6f5ee;
    border-color: #a3d4b8;
    color: #1e5e3a;
}
.alert-danger  {
    background: #fdf0ef;
    border-color: #f5b8b2;
    color: #8b2114;
}
.alert-warning {
    background: #fffbea;
    border-color: #f5df90;
    color: #7a5900;
}

/* ─── Formulários ────────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--capri-green);
    box-shadow: 0 0 0 .2rem rgba(45, 95, 74, .2);
}
.form-label { font-weight: 600; font-size: .88rem; color: var(--capri-charcoal); }

/* ─── Página de login ─────────────────────────────────────────────────────── */
.login-wrapper {
    background: linear-gradient(160deg, var(--capri-green) 0%, #1a3d2d 100%);
}
.login-card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}
.login-logo-strip {
    background: var(--capri-green);
    border-radius: 12px 12px 0 0;
    padding: 1.5rem;
    text-align: center;
}
.login-logo-strip h4 { color: #fff; font-weight: 800; margin: 0; }
.login-logo-strip span { color: var(--capri-gold); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer {
    background: var(--capri-charcoal);
    color: #aaa;
    font-size: .78rem;
    padding: .8rem 0;
    margin-top: auto;
}
footer a { color: var(--capri-gold); text-decoration: none; }

/* ─── Status badges das resenhas ─────────────────────────────────────────── */
.badge-status-F { background: var(--capri-green-bright); color: #fff; }
.badge-status-P { background: var(--capri-gold); color: var(--capri-charcoal); }
.badge-status-C { background: #999; color: #fff; }

/* ─── Indicador de DataUpload ────────────────────────────────────────────── */
.tag-enviado   { color: #c41e3a; font-weight: 600; }
.tag-pendente  { color: #888; font-style: italic; }

/* ─── Page title strip ───────────────────────────────────────────────────── */
.page-title-strip {
    background: var(--capri-white);
    border-bottom: 3px solid var(--capri-gold);
    padding: .75rem 0;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.page-title-strip h2 { font-weight: 700; color: var(--capri-green); margin: 0; font-size: 1.3rem; }