/* ==========================================================================
   AVP Management Portal – Brand Stylesheet
   Fonts: Cinzel (headlines) + Montserrat (body)
   Palette: Royal Gold #D4AF37 | Deep Black #000 | Pearl White #FAFAF8 | Charcoal #1A1A1A
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    --gold:          #D4AF37;
    --gold-light:    #e8c84a;
    --gold-dim:      rgba(212,175,55,0.18);
    --gold-border:   rgba(212,175,55,0.35);
    --gold-focus:    rgba(212,175,55,0.45);
    --black:         #000000;
    --charcoal:      #1A1A1A;
    --charcoal-light:#252525;
    --charcoal-mid:  #2e2e2e;
    --pearl:         #FAFAF8;
    --muted:         #8a8a8a;
    --muted-light:   #b0b0b0;
    --danger:        #c0392b;
    --danger-dim:    rgba(192,57,43,0.18);
    --success:       #27ae60;
    --success-dim:   rgba(39,174,96,0.18);
    --radius:        6px;
    --radius-lg:     10px;
    --transition:    0.2s ease;
    --shadow:        0 4px 24px rgba(0,0,0,0.6);
    --shadow-gold:   0 0 20px rgba(212,175,55,0.12);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--black);
    color:            var(--pearl);
    font-family:      'Montserrat', sans-serif;
    font-size:        0.9rem;
    font-weight:      400;
    min-height:       100vh;
    line-height:      1.65;
}

h1, h2, h3, h4, h5, h6, .font-cinzel {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
    font-weight:    600;
    color:          var(--pearl);
}

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }

hr { border-color: var(--gold-border); opacity:1; }

/* ── Navbar ────────────────────────────────────────────────────────────────── */
.navbar {
    background: var(--black) !important;
    border-bottom: 1px solid var(--gold-border);
    padding: 0.75rem 1.5rem;
}

.navbar-brand {
    font-family: 'Cinzel', serif;
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--gold) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.navbar-brand span { color: var(--pearl); }

.navbar-toggler {
    border-color: var(--gold-border);
    color: var(--gold);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212,175,55,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
    color: var(--muted-light) !important;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 1rem !important;
    transition: color var(--transition);
}
.nav-link:hover, .nav-link.active {
    color: var(--gold) !important;
}
.nav-link.active {
    border-bottom: 2px solid var(--gold);
}

.navbar-nav .nav-item { display: flex; align-items: center; }

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header {
    padding: 1.75rem 0 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--gold-border);
}
.page-header h1 {
    font-size: 1.5rem;
    color: var(--gold);
    margin: 0;
}
.page-header .breadcrumb {
    background: none;
    padding: 0;
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
.breadcrumb-item a { color: var(--muted-light); }
.breadcrumb-item.active { color: var(--muted); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
    background:    var(--charcoal);
    border:        1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow);
    color:         var(--pearl);
}

.card-header {
    background:    var(--charcoal-light);
    border-bottom: 1px solid var(--gold-border);
    font-family:   'Cinzel', serif;
    font-size:     0.85rem;
    font-weight:   600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:         var(--gold);
    padding:       0.9rem 1.25rem;
}

.card-body { padding: 1.4rem; }

/* Entity cards on dashboard */
.entity-card {
    position:      relative;
    background:    var(--charcoal);
    border:        1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding:       1.4rem;
    transition:    transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    overflow:      hidden;
    height:        100%;
}
.entity-card::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width:  4px;
    height: 100%;
    background: var(--gold);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.entity-card.project-card::before {
    background: linear-gradient(180deg, #6c7a8d, #4a5568);
}
.entity-card:hover {
    transform:      translateY(-3px);
    box-shadow:     var(--shadow-gold);
    border-color:   var(--gold);
}
.entity-card .badge-type {
    display:       inline-block;
    font-size:     0.65rem;
    font-weight:   600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:       0.25em 0.65em;
    border-radius: 20px;
    margin-bottom: 0.6rem;
}
.entity-card .badge-business { background: var(--gold-dim); color: var(--gold); }
.entity-card .badge-project  { background: rgba(108,122,141,0.2); color: #8fa3bc; }

.entity-card .name {
    font-family:   'Cinzel', serif;
    font-size:     1.05rem;
    font-weight:   600;
    color:         var(--pearl);
    margin-bottom: 0.4rem;
}
.entity-card .revenue {
    font-size:   1.25rem;
    font-weight: 600;
    color:       var(--gold);
    margin-bottom: 0.2rem;
}
.entity-card .meta {
    font-size:  0.75rem;
    color:      var(--muted);
}
.entity-card .actions {
    margin-top: 1rem;
    display:    flex;
    gap:        0.5rem;
}

/* ── Stat tiles on dashboard ───────────────────────────────────────────────── */
.stat-tile {
    background:    var(--charcoal);
    border:        1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding:       1.4rem 1.6rem;
    text-align:    center;
}
.stat-tile .stat-value {
    font-family:   'Cinzel', serif;
    font-size:     2rem;
    font-weight:   700;
    color:         var(--gold);
    line-height:   1.2;
}
.stat-tile .stat-label {
    font-size:  0.72rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:      var(--muted);
    margin-top: 0.3rem;
}

/* ── Section headings ──────────────────────────────────────────────────────── */
.section-title {
    font-family:   'Cinzel', serif;
    font-size:     0.8rem;
    font-weight:   700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:         var(--gold);
    margin-bottom: 1rem;
    padding-bottom:0.4rem;
    border-bottom: 1px solid var(--gold-border);
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--gold-border);
    gap: 0.25rem;
}
.nav-tabs .nav-link {
    background:    transparent !important;
    border:        1px solid transparent;
    border-bottom: none;
    color:         var(--muted-light) !important;
    font-size:     0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:       0.6rem 1.2rem;
    border-radius: var(--radius) var(--radius) 0 0;
    transition:    color var(--transition), border-color var(--transition);
}
.nav-tabs .nav-link:hover { color: var(--gold) !important; }
.nav-tabs .nav-link.active {
    background:   var(--charcoal) !important;
    border-color: var(--gold-border) var(--gold-border) var(--charcoal);
    color:        var(--gold) !important;
}
.tab-content {
    background:    var(--charcoal);
    border:        1px solid var(--gold-border);
    border-top:    none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding:       1.75rem;
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-label {
    font-size:     0.75rem;
    font-weight:   600;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:         var(--muted-light);
    margin-bottom: 0.35rem;
}

.form-control, .form-select {
    background:   #111111;
    border:       1px solid var(--gold-border);
    border-radius:var(--radius);
    color:        var(--pearl);
    font-family:  'Montserrat', sans-serif;
    font-size:    0.88rem;
    padding:      0.55rem 0.85rem;
    transition:   border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
    background:  #111111;
    border-color:var(--gold);
    color:       var(--pearl);
    box-shadow:  0 0 0 3px var(--gold-focus);
    outline:     none;
}
.form-control::placeholder { color: var(--muted); }
.form-select option { background: var(--charcoal); color: var(--pearl); }

.form-control:disabled, .form-control[readonly] {
    background: #0d0d0d;
    color: var(--muted);
    border-color: rgba(212,175,55,0.15);
}

/* ── Range Sliders ─────────────────────────────────────────────────────────── */
.form-range { accent-color: var(--gold); cursor: pointer; }
.form-range::-webkit-slider-runnable-track {
    background:    var(--charcoal-mid);
    border-radius: 4px;
    height:        6px;
}
.form-range::-webkit-slider-thumb {
    background:    var(--gold);
    border:        2px solid var(--black);
    box-shadow:    0 0 6px rgba(212,175,55,0.5);
    width:         18px;
    height:        18px;
    border-radius: 50%;
    margin-top:    -6px;
}
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gold-focus); }
.form-range:disabled::-webkit-slider-thumb { background: var(--muted); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
    font-family:   'Montserrat', sans-serif;
    font-size:     0.78rem;
    font-weight:   600;
    letter-spacing:0.07em;
    text-transform:uppercase;
    padding:       0.5rem 1.2rem;
    border-radius: var(--radius);
    transition:    all var(--transition);
}

.btn-gold {
    background:   var(--gold);
    border-color: var(--gold);
    color:        var(--black);
}
.btn-gold:hover {
    background:   var(--gold-light);
    border-color: var(--gold-light);
    color:        var(--black);
    box-shadow:   0 4px 14px rgba(212,175,55,0.35);
}

.btn-outline-gold {
    background:   transparent;
    border:       1px solid var(--gold);
    color:        var(--gold);
}
.btn-outline-gold:hover {
    background:   var(--gold-dim);
    border-color: var(--gold);
    color:        var(--gold-light);
}

.btn-outline-danger {
    background:   transparent;
    border:       1px solid var(--danger);
    color:        var(--danger);
}
.btn-outline-danger:hover {
    background: var(--danger-dim);
    color:      #e74c3c;
}

.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.72rem; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.table {
    color:        var(--pearl);
    font-size:    0.85rem;
    border-color: var(--gold-border);
    margin:       0;
}
.table th {
    font-family:   'Cinzel', serif;
    font-size:     0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:         var(--gold);
    font-weight:   600;
    border-color:  var(--gold-border);
    background:    var(--charcoal-light);
    padding:       0.75rem 1rem;
    white-space:   nowrap;
}
.table td {
    border-color: rgba(212,175,55,0.12);
    padding:      0.75rem 1rem;
    vertical-align: middle;
}
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--charcoal-light); }
.table-responsive { border-radius: var(--radius-lg); overflow: hidden; }

/* ── Profit Split panel ────────────────────────────────────────────────────── */
.split-row {
    background:    var(--charcoal-light);
    border:        1px solid rgba(212,175,55,0.12);
    border-radius: var(--radius);
    padding:       1rem 1.2rem;
    margin-bottom: 0.6rem;
    transition:    border-color var(--transition);
}
.split-row:hover { border-color: var(--gold-border); }
.split-row .cat-name {
    font-family:   'Cinzel', serif;
    font-size:     0.8rem;
    font-weight:   600;
    letter-spacing:0.06em;
    color:         var(--pearl);
    min-width:     160px;
}
.split-row .pct-badge {
    display:       inline-block;
    font-weight:   700;
    font-size:     1.1rem;
    color:         var(--gold);
    min-width:     55px;
    text-align:    right;
}
.split-row .amount-box {
    background:    rgba(0,0,0,0.35);
    border:        1px solid rgba(212,175,55,0.12);
    border-radius: var(--radius);
    padding:       0.4rem 0.8rem;
    text-align:    right;
}
.split-row .amount-box .label {
    font-size:  0.65rem;
    color:      var(--muted);
    text-transform:uppercase;
    letter-spacing:0.08em;
}
.split-row .amount-box .value {
    font-weight: 600;
    font-size:   0.9rem;
    color:       var(--pearl);
}
.split-row.profit-row .cat-name { color: var(--gold); }
.split-row.profit-row { border-color: var(--gold-border); background: var(--gold-dim); }
.split-row.profit-row .pct-badge { font-size: 1.3rem; }

.split-total-bar {
    background:    var(--charcoal-light);
    border:        1px solid var(--gold-border);
    border-radius: var(--radius);
    padding:       0.75rem 1.2rem;
    display:       flex;
    justify-content:space-between;
    align-items:   center;
    margin-top:    0.75rem;
}
.split-total-bar .total-label {
    font-family:   'Cinzel', serif;
    font-size:     0.75rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:         var(--muted-light);
}
.split-total-bar .total-pct {
    font-weight: 700;
    font-size:   1.2rem;
    color:       var(--success);
}
.split-total-bar .total-pct.over { color: var(--danger); }

/* ── Owner rows (dynamic form) ─────────────────────────────────────────────── */
.owner-row {
    background:    var(--charcoal-light);
    border:        1px solid rgba(212,175,55,0.15);
    border-radius: var(--radius);
    padding:       0.9rem 1rem;
    margin-bottom: 0.6rem;
    position:      relative;
}
.owner-row .btn-remove-owner {
    position:   absolute;
    top:        0.6rem;
    right:      0.6rem;
    font-size:  0.7rem;
    padding:    0.2rem 0.6rem;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge-active   { background: var(--success-dim); color: var(--success); border: 1px solid var(--success); font-size:0.7rem; padding:0.3em 0.7em; border-radius:20px; font-weight:600; }
.badge-archived { background: var(--danger-dim);  color: #e74c3c;        border: 1px solid #c0392b;        font-size:0.7rem; padding:0.3em 0.7em; border-radius:20px; font-weight:600; }
.badge-usd      { background: rgba(39,174,96,0.12); color:#27ae60; border:1px solid rgba(39,174,96,0.3); font-size:0.65rem; padding:0.25em 0.6em; border-radius:20px; font-weight:700; letter-spacing:0.06em; }
.badge-inr      { background: rgba(52,152,219,0.12); color:#3498db; border:1px solid rgba(52,152,219,0.3); font-size:0.65rem; padding:0.25em 0.6em; border-radius:20px; font-weight:700; letter-spacing:0.06em; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.alert-success { background: var(--success-dim); border-color: var(--success); color: #2ecc71; }
.alert-danger  { background: var(--danger-dim);  border-color: var(--danger);  color: #e74c3c; }

/* ── Login page ────────────────────────────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display:    flex;
    align-items:center;
    justify-content:center;
    background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.06) 0%, transparent 70%),
                var(--black);
}
.login-card {
    width:         100%;
    max-width:     420px;
    background:    var(--charcoal);
    border:        1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding:       2.5rem 2rem;
    box-shadow:    var(--shadow), var(--shadow-gold);
}
.login-logo {
    font-family:   'Cinzel', serif;
    font-size:     1.5rem;
    font-weight:   700;
    color:         var(--gold);
    letter-spacing:0.1em;
    text-align:    center;
    margin-bottom: 0.3rem;
}
.login-sub {
    font-size:     0.72rem;
    color:         var(--muted);
    text-align:    center;
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin-bottom: 2rem;
}

/* ── Responsive layout ─────────────────────────────────────────────────────── */
.main-content {
    padding: 1rem 1.5rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .main-content { padding: 0.75rem 1rem 2.5rem; }
    .entity-card  { margin-bottom: 1rem; }
    .split-row .cat-name { min-width: 120px; font-size: 0.72rem; }
    .split-row .amount-box { padding: 0.3rem 0.5rem; }
}

/* ── Misc utilities ─────────────────────────────────────────────────────────── */
.text-gold       { color: var(--gold) !important; }
.text-muted      { color: var(--muted) !important; }
.text-muted-light{ color: var(--muted-light) !important; }
.border-gold     { border-color: var(--gold-border) !important; }
.bg-charcoal     { background: var(--charcoal) !important; }
.fw-600          { font-weight: 600 !important; }
.portal-table    { color: var(--pearl); font-size: 0.85rem; border-color: var(--gold-border); margin: 0; }
.small-caps {
    font-family:   'Cinzel', serif;
    font-size:     0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:         var(--muted);
}
.divider-gold { border: none; border-top: 1px solid var(--gold-border); margin: 1.25rem 0; }

/* ── History year rows ─────────────────────────────────────────────────────── */
.year-row {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    background:    var(--charcoal-light);
    border:        1px solid rgba(212,175,55,0.12);
    border-radius: var(--radius);
    padding:       0.6rem 0.9rem;
    margin-bottom: 0.5rem;
}
.year-row .yr-label {
    font-family:   'Cinzel', serif;
    font-size:     0.8rem;
    font-weight:   600;
    color:         var(--gold);
    min-width:     60px;
}

/* ── Loading overlay ───────────────────────────────────────────────────────── */
#save-spinner {
    display:    none;
    font-size:  0.8rem;
    color:      var(--muted);
}