/* BoatEye Dark Theme - Shared across all layouts */

:root {
    --primary: #4FC3F7;
    --primary-dim: #0288D1;
    --secondary: #80DEEA;
    --tertiary: #80CBC4;
    --error: #F28B82;
    --warning: #FDD663;
    --success: #81C995;
    --bg: #0A0F14;
    --surface: #111820;
    --surface-1: #161E27;
    --surface-2: #1C2530;
    --surface-3: #222D3A;
    --outline: #2E3D4F;
    --outline-var: #1E2B38;
    --on-bg: #E0EAF4;
    --on-surface: #B8CCE0;
    --on-surface-var: #6B8BA8;
}

/* ── BASE ── */
body {
    background: var(--bg) !important;
    color: var(--on-bg) !important;
    font-family: 'Inter', system-ui, -apple-system, 'Nunito', sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
}
a:hover {
    color: var(--secondary);
}

/* ── NAVBAR ── */
.navbar-dark-be {
    background: rgba(10, 15, 20, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--outline-var);
    padding: 0 24px;
    min-height: 56px;
}
.navbar-dark-be .navbar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--on-bg);
}
.navbar-dark-be .navbar-brand .brand-eye {
    color: var(--primary);
}
.navbar-dark-be .nav-link {
    color: var(--on-surface-var) !important;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.2s;
}
.navbar-dark-be .nav-link:hover,
.navbar-dark-be .nav-link:focus {
    color: var(--on-bg) !important;
}
.navbar-dark-be .navbar-toggler {
    border-color: var(--outline);
    color: var(--on-surface);
}
.navbar-dark-be .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(184, 204, 224, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark-be .dropdown-menu {
    background: var(--surface-1);
    border: 1px solid var(--outline);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.navbar-dark-be .dropdown-item {
    color: var(--on-surface);
    font-size: 0.88rem;
}
.navbar-dark-be .dropdown-item:hover,
.navbar-dark-be .dropdown-item:focus {
    background: var(--surface-2);
    color: var(--on-bg);
}

/* ── CARDS ── */
.card {
    background: var(--surface-1) !important;
    border: 1px solid var(--outline-var) !important;
    border-radius: 14px !important;
    color: var(--on-bg);
}
.card-header {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--outline-var) !important;
    color: var(--on-bg) !important;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}
.card-header a {
    color: var(--primary);
}
.card-header a:hover {
    color: var(--secondary);
}
.card-body {
    color: var(--on-surface);
}

/* ── FORMS ── */
.form-control {
    background: var(--surface-2) !important;
    border: 1px solid var(--outline) !important;
    color: var(--on-bg) !important;
    border-radius: 8px;
    transition: border-color 0.2s;
}
.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.15) !important;
    background: var(--surface-3) !important;
}
.form-control::placeholder {
    color: var(--on-surface-var) !important;
}
.form-control:disabled,
.form-control[readonly] {
    background: var(--surface) !important;
    color: var(--on-surface-var) !important;
    opacity: 0.8;
}

label,
.col-form-label {
    color: var(--on-surface) !important;
    font-weight: 500;
    font-size: 0.88rem;
}

.form-check-label {
    color: var(--on-surface) !important;
}

select.form-control {
    background: var(--surface-2) !important;
    color: var(--on-bg) !important;
}

/* Input groups */
.input-group-text {
    background: var(--surface-3) !important;
    border: 1px solid var(--outline) !important;
    color: var(--on-surface) !important;
    font-size: 0.85rem;
}
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    background: var(--surface-3) !important;
    border-color: var(--outline) !important;
    color: var(--on-surface) !important;
}

/* ── BUTTONS ── */
.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #0A0F14 !important;
    font-weight: 600;
    border-radius: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover {
    background: #3DB8F0 !important;
    border-color: #3DB8F0 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(79, 195, 247, 0.25);
}

.btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #0A0F14 !important;
    font-weight: 600;
    border-radius: 8px;
}
.btn-success:hover {
    background: #6BBF85 !important;
    border-color: #6BBF85 !important;
}

.btn-danger {
    background: var(--error) !important;
    border-color: var(--error) !important;
    color: #0A0F14 !important;
    font-weight: 600;
    border-radius: 8px;
}
.btn-danger:hover {
    background: #E67A72 !important;
    border-color: #E67A72 !important;
}

.btn-warning {
    background: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #0A0F14 !important;
    font-weight: 600;
    border-radius: 8px;
}
.btn-warning:hover {
    background: #E8C44E !important;
    border-color: #E8C44E !important;
}

.btn-link {
    color: var(--primary) !important;
}
.btn-link:hover {
    color: var(--secondary) !important;
}

/* ── TABLES ── */
.table {
    color: var(--on-surface) !important;
}
.table thead th {
    background: var(--surface-2);
    border-bottom: 2px solid var(--outline) !important;
    color: var(--on-bg);
    font-size: 0.85rem;
    font-weight: 600;
}
.table td {
    border-top: 1px solid var(--outline-var) !important;
    vertical-align: middle;
}
.table-hover tbody tr:hover {
    background: var(--surface-2) !important;
    color: var(--on-bg) !important;
}

/* ── ALERTS ── */
.alert-success {
    background: rgba(129, 201, 149, 0.12) !important;
    border: 1px solid rgba(129, 201, 149, 0.25) !important;
    color: var(--success) !important;
    border-radius: 10px;
}
.alert-danger {
    background: rgba(242, 139, 130, 0.12) !important;
    border: 1px solid rgba(242, 139, 130, 0.25) !important;
    color: var(--error) !important;
    border-radius: 10px;
}
.alert-warning {
    background: rgba(253, 214, 99, 0.12) !important;
    border: 1px solid rgba(253, 214, 99, 0.25) !important;
    color: var(--warning) !important;
    border-radius: 10px;
}
.alert-info {
    background: rgba(79, 195, 247, 0.12) !important;
    border: 1px solid rgba(79, 195, 247, 0.25) !important;
    color: var(--primary) !important;
    border-radius: 10px;
}

/* ── UTILITIES ── */
.text-dark {
    color: var(--on-bg) !important;
}
.text-muted {
    color: var(--on-surface-var) !important;
}
.bg-light {
    background: var(--surface-1) !important;
}
.shadow-sm {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

hr {
    border-color: var(--outline-var);
}

h6 {
    color: var(--on-bg);
    font-weight: 600;
}

/* ── DASHBOARD CARDS ── */
.dashboard-card {
    background: var(--surface-1);
    border: 1px solid var(--outline-var);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--on-bg);
    text-decoration: none;
    display: block;
}
.dashboard-card:hover {
    border-color: var(--outline);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-decoration: none;
    color: var(--on-bg);
}
.dashboard-card .card-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 12px;
}
.dashboard-card .card-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--on-surface);
}

/* ── BREADCRUMB STYLE HEADER ── */
.card-header a {
    color: var(--primary);
    text-decoration: none;
}
.card-header a:hover {
    color: var(--secondary);
    text-decoration: underline;
}

/* ── INVALID FEEDBACK ── */
.invalid-feedback {
    color: var(--error) !important;
}
.is-invalid {
    border-color: var(--error) !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--surface);
}
::-webkit-scrollbar-thumb {
    background: var(--outline);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--on-surface-var);
}

/* ── PAGE CONTENT SPACING ── */
.content-wrapper {
    padding-top: 24px;
    padding-bottom: 48px;
}