/* ================================================================
   Shore-Jones — Dark Blue / Gold theme
   Bootstrap 5 dark mode overrides
   ================================================================ */

:root {
    --sj-bg-dark:      #0A1628;
    --sj-bg-card:      #0F2035;
    --sj-bg-input:     #132A46;
    --sj-border:       #1E3A5F;
    --sj-gold:         #C9A84C;
    --sj-gold-light:   #E8D48B;
    --sj-gold-muted:   #8B7A3E;
    --sj-text:         #D4DCE8;
    --sj-text-muted:   #6B7D99;
    --sj-success:      #22C55E;
    --sj-danger:       #EF4444;
    --sj-info:         #38BDF8;
    --sj-white:        #FFFFFF;
}

/* ── Global ────────────────────────────────────────────────────── */
body {
    background-color: var(--sj-bg-dark) !important;
    color: var(--sj-text) !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

a { color: var(--sj-gold); }
a:hover { color: var(--sj-gold-light); }

::selection {
    background: var(--sj-gold);
    color: var(--sj-bg-dark);
}

/* ── Navbar ────────────────────────────────────────────────────── */
.navbar {
    background-color: #071020 !important;
    border-bottom: 1px solid var(--sj-border);
    padding: .6rem 1.2rem;
}
.navbar-brand {
    color: var(--sj-gold) !important;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .5px;
}
.navbar-brand:hover { color: var(--sj-gold-light) !important; }

.nav-link {
    color: var(--sj-text-muted) !important;
    font-weight: 500;
    transition: color .15s;
}
.nav-link:hover,
.nav-link.active {
    color: var(--sj-gold) !important;
}

.navbar-toggler {
    border-color: var(--sj-border);
}
.navbar-toggler-icon {
    filter: invert(70%) sepia(30%) saturate(400%) hue-rotate(10deg);
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
    background-color: var(--sj-bg-card) !important;
    border: 1px solid var(--sj-border);
    border-radius: .5rem;
    color: var(--sj-text);
}
.card-header {
    background-color: rgba(10, 22, 40, .6) !important;
    border-bottom: 1px solid var(--sj-border);
    color: var(--sj-gold);
    font-weight: 600;
}

/* ── System cards on home page ─────────────────────────────────── */
.system-card {
    background: var(--sj-bg-card);
    border: 1px solid var(--sj-border);
    border-left: 4px solid var(--sj-gold);
    border-radius: .5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
    display: block;
    color: var(--sj-text);
}
.system-card:hover {
    border-color: var(--sj-gold);
    box-shadow: 0 0 20px rgba(201, 168, 76, .15);
    transform: translateY(-2px);
    color: var(--sj-white);
    text-decoration: none;
}
.system-card .system-icon {
    font-size: 3rem;
    color: var(--sj-gold);
    margin-bottom: .75rem;
}
.system-card .system-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sj-gold);
    margin-bottom: .25rem;
}
.system-card .system-desc {
    font-size: .85rem;
    color: var(--sj-text-muted);
}

/* ── Forms ─────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--sj-bg-input) !important;
    border: 1px solid var(--sj-border) !important;
    color: var(--sj-text) !important;
    transition: border-color .15s;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--sj-gold) !important;
    box-shadow: 0 0 0 .2rem rgba(201, 168, 76, .25) !important;
    color: var(--sj-white) !important;
}
.form-control::placeholder { color: var(--sj-text-muted) !important; }
.form-label { color: var(--sj-gold-muted); font-weight: 500; font-size: .9rem; }
.form-check-input {
    background-color: var(--sj-bg-input);
    border-color: var(--sj-border);
}
.form-check-input:checked {
    background-color: var(--sj-gold);
    border-color: var(--sj-gold);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-gold {
    background-color: var(--sj-gold);
    color: var(--sj-bg-dark);
    border: none;
    font-weight: 600;
    padding: .5rem 1.5rem;
    border-radius: .375rem;
    transition: all .15s;
}
.btn-gold:hover {
    background-color: var(--sj-gold-light);
    color: var(--sj-bg-dark);
}
.btn-gold:disabled {
    background-color: var(--sj-gold-muted);
    color: var(--sj-bg-card);
}

.btn-outline-gold {
    border: 1px solid var(--sj-gold);
    color: var(--sj-gold);
    background: transparent;
    font-weight: 500;
    padding: .4rem 1.2rem;
    border-radius: .375rem;
}
.btn-outline-gold:hover {
    background-color: var(--sj-gold);
    color: var(--sj-bg-dark);
}

.btn-danger {
    background-color: var(--sj-danger) !important;
    border-color: var(--sj-danger) !important;
}
.btn-success {
    background-color: var(--sj-success) !important;
    border-color: var(--sj-success) !important;
}

/* ── Tables ────────────────────────────────────────────────────── */
.table {
    color: var(--sj-text) !important;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(15, 32, 53, .5);
    --bs-table-hover-bg: rgba(30, 58, 95, .3);
}
.table thead th {
    color: var(--sj-gold);
    border-bottom: 2px solid var(--sj-border);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.table td { border-color: var(--sj-border); }

/* ── Badges ────────────────────────────────────────────────────── */
.badge-gold {
    background-color: var(--sj-gold);
    color: var(--sj-bg-dark);
    font-weight: 600;
}
.badge-active {
    background: rgba(34, 197, 94, .15);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, .3);
}
.badge-inactive {
    background: rgba(239, 68, 68, .15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, .3);
}
.badge-group {
    background-color: var(--sj-bg-input);
    color: var(--sj-gold);
    border: 1px solid var(--sj-gold-muted);
    font-weight: 500;
}

/* ── Outline danger button ─────────────────────────────────────── */
.btn-outline-danger {
    border: 1px solid var(--sj-danger) !important;
    color: var(--sj-danger) !important;
    background: transparent !important;
}
.btn-outline-danger:hover {
    background: var(--sj-danger) !important;
    color: #fff !important;
}

/* ── Alerts ────────────────────────────────────────────────────── */
.alert-danger {
    background-color: rgba(239, 68, 68, .15) !important;
    border-color: var(--sj-danger) !important;
    color: #FCA5A5 !important;
}
.alert-success {
    background-color: rgba(34, 197, 94, .15) !important;
    border-color: var(--sj-success) !important;
    color: #86EFAC !important;
}
.alert-warning {
    background-color: rgba(201, 168, 76, .15) !important;
    border-color: var(--sj-gold) !important;
    color: var(--sj-gold-light) !important;
}
.alert-info {
    background-color: rgba(56, 189, 248, .15) !important;
    border-color: var(--sj-info) !important;
    color: #7DD3FC !important;
}

/* ── Login page ────────────────────────────────────────────────── */
.login-container {
    max-width: 420px;
    margin: 8vh auto;
}
.login-card {
    background: var(--sj-bg-card);
    border: 1px solid var(--sj-border);
    border-top: 3px solid var(--sj-gold);
    border-radius: .5rem;
    padding: 2.5rem 2rem;
}
.login-title {
    color: var(--sj-gold);
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
/* Ensure login form layout works even if Bootstrap CDN fails */
.login-card .form-group {
    margin-bottom: 1.5rem;
}
.login-card .form-label {
    display: block;
    margin-bottom: .5rem;
}
.login-card .form-control {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .375rem;
    box-sizing: border-box;
}
.login-card .form-check {
    margin-bottom: 1.5rem;
}
.login-card .form-check-input {
    margin-right: .5rem;
    vertical-align: middle;
}
.login-card .form-check-label {
    vertical-align: middle;
}
.login-card .btn-block {
    display: block;
    width: 100%;
}

/* ── Page header ───────────────────────────────────────────────── */
.page-header {
    color: var(--sj-gold);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--sj-border);
}

/* ── Modals ────────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--sj-bg-card) !important;
    border: 1px solid var(--sj-border);
    color: var(--sj-text);
}
.modal-header {
    border-bottom-color: var(--sj-border);
}
.modal-header .modal-title { color: var(--sj-gold); }
.modal-footer { border-top-color: var(--sj-border); }
.btn-close { filter: invert(1); }

/* ── Tabs (admin panel) ───────────────────────────────────────── */
.nav-tabs {
    border-bottom-color: var(--sj-border);
}
.nav-tabs .nav-link {
    color: var(--sj-text-muted) !important;
    border: none;
    padding: .6rem 1.2rem;
}
.nav-tabs .nav-link:hover {
    color: var(--sj-gold) !important;
    border: none;
}
.nav-tabs .nav-link.active {
    color: var(--sj-gold) !important;
    background: transparent !important;
    border: none;
    border-bottom: 2px solid var(--sj-gold) !important;
}

/* ── Dropdowns ─────────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--sj-bg-card);
    border: 1px solid var(--sj-border);
}
.dropdown-item {
    color: var(--sj-text);
}
.dropdown-item:hover {
    background-color: var(--sj-bg-input);
    color: var(--sj-gold);
}
.dropdown-divider { border-color: var(--sj-border); }

/* ── Utility ───────────────────────────────────────────────────── */
.text-gold  { color: var(--sj-gold) !important; }
.text-muted { color: var(--sj-text-muted) !important; }
.border-gold { border-color: var(--sj-gold) !important; }
.bg-sj-dark { background-color: var(--sj-bg-dark) !important; }
.bg-sj-card { background-color: var(--sj-bg-card) !important; }

/* ── Welcome message ───────────────────────────────────────────── */
.welcome-msg {
    text-align: center;
    margin-bottom: 2rem;
}
.welcome-msg h2 {
    color: var(--sj-gold);
    font-weight: 700;
}
.welcome-msg p {
    color: var(--sj-text-muted);
    font-size: 1.05rem;
}

/* ── Logout button (home page) ─────────────────────────────────── */
.btn-logout {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.8rem;
    border: 1px solid var(--sj-danger);
    border-radius: .375rem;
    color: var(--sj-danger);
    background: transparent;
    font-weight: 500;
    font-size: .95rem;
    text-decoration: none;
    transition: all .2s ease;
}
.btn-logout:hover {
    background: var(--sj-danger);
    color: #fff;
    text-decoration: none;
}

/* ── Legal pages (Privacy, Terms) ─────────────────────────────── */
.legal-container {
    max-width: 780px;
    margin: 4vh auto;
    padding: 0 1rem;
}
.legal-card {
    background: var(--sj-bg-card);
    border: 1px solid var(--sj-border);
    border-top: 3px solid var(--sj-gold);
    border-radius: .5rem;
    overflow: hidden;
}
.legal-header {
    text-align: center;
    padding: 2.5rem 2rem 1.5rem;
    border-bottom: 1px solid var(--sj-border);
}
.legal-header i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
}
.legal-header h1 {
    color: var(--sj-gold);
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0 0 .5rem;
}
.legal-updated {
    color: var(--sj-text-muted);
    font-size: .85rem;
    margin: 0;
}
.legal-body {
    padding: 2rem 2.5rem;
    line-height: 1.75;
    color: var(--sj-text);
}
.legal-body h2 {
    color: var(--sj-gold);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2rem 0 .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--sj-border);
}
.legal-body h2:first-of-type {
    margin-top: 1rem;
}
.legal-body p {
    margin-bottom: .75rem;
    font-size: .95rem;
}
.legal-body ul {
    padding-left: 1.5rem;
    margin-bottom: .75rem;
}
.legal-body li {
    margin-bottom: .35rem;
    font-size: .95rem;
}
.legal-body a {
    color: var(--sj-gold);
}
.legal-body a:hover {
    color: var(--sj-gold-light);
}
.legal-contact {
    background: rgba(10, 22, 40, .5);
    border: 1px solid var(--sj-border);
    border-radius: .375rem;
    padding: 1rem 1.5rem;
    margin-top: .5rem;
}
.legal-contact p {
    margin-bottom: .25rem;
}
.legal-footer {
    padding: 1.25rem 2.5rem;
    border-top: 1px solid var(--sj-border);
    background: rgba(10, 22, 40, .4);
}

/* ── Responsive tweaks ─────────────────────────────────────────── */
@media (max-width: 576px) {
    .login-container { margin: 4vh 1rem; }
    .login-card { padding: 1.5rem 1.2rem; }
    .system-card { padding: 1.2rem 1rem; }
    .system-card .system-icon { font-size: 2.2rem; }
    .legal-container { margin: 2vh .5rem; }
    .legal-body { padding: 1.25rem 1rem; }
    .legal-footer { padding: 1rem; }
}