/*
 * design-refresh.css
 * Loaded last — overrides Bootstrap, Material Dashboard, and per-page styles
 * Goal: Chatbase-style minimal, clean aesthetic
 */

/* ===== TYPOGRAPHY ===== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* Heading scale — no gradient text, clean weights */
h1, .h1 {
    font-size: 1.875rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}
h2, .h2 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}
h3, .h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}
h4, .h4 {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}
h5, .h5 {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}
h6, .h6 {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

/* ===== PAGE HEADER / DASHBOARD TITLE ===== */

.dashboard-title {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
    line-height: 1.3 !important;
}

.dashboard-subtitle, .section-subtitle {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
}

.section-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}

.dashboard-header {
    border-radius: 8px !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Remove hover shimmer pseudo-element from dashboard header */
.dashboard-header::before {
    display: none !important;
}

/* ===== BOOTSTRAP CARDS ===== */

.card {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    background: var(--bg-card) !important;
    margin-bottom: 1.25rem !important;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transform: none !important;
}

.card-body {
    padding: 1.25rem !important;
}

.card-header {
    padding: 0.875rem 1.25rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
}

.card-footer {
    padding: 0.875rem 1.25rem !important;
    border-top: 1px solid var(--border-color) !important;
    background: transparent !important;
}

.card.card-raised,
.card.card-plain {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Custom feature cards */
.project-card, .campaign-card, .collaboration-card {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.project-card:hover, .campaign-card:hover, .collaboration-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transform: none !important;
}

/* ===== BUTTONS ===== */

/* Remove shimmer animation from futuristic buttons */
.futuristic-btn::before {
    display: none !important;
}

.futuristic-btn {
    padding: 0.4375rem 0.875rem !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    gap: 0.375rem !important;
}

.futuristic-btn:hover {
    transform: none !important;
}

.futuristic-btn.primary {
    background: var(--accent-primary) !important;
    box-shadow: none !important;
}

.futuristic-btn.primary:hover {
    background: #4f46e5 !important;
    box-shadow: none !important;
}

.futuristic-btn.secondary {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.futuristic-btn.secondary:hover {
    background: var(--bg-hover) !important;
    box-shadow: none !important;
}

.futuristic-btn.success {
    box-shadow: none !important;
}

.futuristic-btn.warning {
    box-shadow: none !important;
}

.futuristic-btn.small {
    padding: 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
}

/* Bootstrap button overrides */
.btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.4375rem 0.875rem !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn:hover {
    transform: none !important;
}

.btn-lg {
    padding: 0.5625rem 1.125rem !important;
    font-size: 0.9375rem !important;
}

.btn-sm {
    padding: 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
}

.btn-primary {
    box-shadow: none !important;
}

.btn-primary:hover {
    box-shadow: none !important;
}

/* ===== FORM CONTROLS ===== */

.form-control {
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    font-size: 0.9375rem !important;
    padding: 0.4375rem 0.75rem !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    background: var(--bg-card) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

.form-group {
    margin-bottom: 1rem !important;
}

label, .form-label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.375rem !important;
}

/* Custom selects */
select.form-control {
    padding: 0.4375rem 0.75rem !important;
}

/* ===== TABLES (Bootstrap + DataTables) ===== */

.table {
    font-size: 0.9375rem !important;
}

.table thead th {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.625rem 0.75rem !important;
}

.table tbody td {
    font-size: 0.9375rem !important;
    padding: 0.625rem 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
}

table.dataTable thead th {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-muted) !important;
}

table.dataTable tbody td {
    font-size: 0.9375rem !important;
    color: var(--text-primary) !important;
}

/* ===== MODALS ===== */

.modal-content {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.modal-header {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-body {
    padding: 1.25rem !important;
}

.modal-footer {
    padding: 0.875rem 1.25rem !important;
    border-top: 1px solid var(--border-color) !important;
}

.modal-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Modern modal variant */
.modern-modal .modal-content {
    border-radius: 8px !important;
}

/* ===== BADGES & TAGS ===== */

.badge {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    padding: 0.25em 0.5em !important;
}

/* ===== ALERTS ===== */

.alert {
    border-radius: 6px !important;
    font-size: 0.9375rem !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
}

/* ===== NAVBAR (Material Dashboard override) ===== */

.navbar {
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ===== SIDEBAR (Material Dashboard override) ===== */

.sidebar,
.main-sidebar {
    box-shadow: none !important;
}

/* ===== REMOVE HOVER LIFT TRANSFORMS ===== */

.support-btn:hover,
.nav-link:hover,
.stat-item:hover,
.help-section:hover {
    transform: none !important;
}

/* ===== SUPPORT BUTTONS ===== */

.support-btn {
    border-radius: 6px !important;
    font-size: 0.875rem !important;
}

/* ===== HELP / INFO SECTIONS ===== */

.help-section {
    border-radius: 8px !important;
    padding: 1.25rem !important;
}

/* ===== PAGE-SPECIFIC CARD GRIDS ===== */

/* Reduce stat item padding */
.stat-item {
    padding: 0.875rem 1rem !important;
}

.stat-label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-muted) !important;
}

.stat-value {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
}

/* ===== FLATPICKR ===== */

.flatpickr-calendar {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    font-size: 0.875rem !important;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}