/*
 * GhChating shared design system (ghc-modern.css)
 * Reusable, prefixed ("gh-") building blocks extracted from the redesigned
 * Feedback/EvaluationDashboard.aspx and Content/ContentManagement.aspx pages,
 * so every other screen can reuse one cached stylesheet instead of duplicating
 * large inline <style> blocks per page. Classes are namespaced with "gh-" to
 * avoid clashing with any page-local styles of the same short name.
 */

:root {
    --gh-primary: #4f46e5;
    --gh-primary-light: #6366f1;
    --gh-primary-dark: #4338ca;
    --gh-accent: #7c3aed;
    --gh-success: #059669;
    --gh-success-bg: #e5f9ee;
    --gh-warning: #d97706;
    --gh-warning-bg: #fff6e0;
    --gh-danger: #dc2626;
    --gh-danger-bg: #fde8e8;
    --gh-info: #2563eb;
    --gh-info-bg: #e7f0ff;
    --gh-purple-bg: #f2e8ff;
    --gh-muted: #6c757d;
    --gh-border: #eef0f4;
    --gh-soft-bg: #f8f9fc;
    --gh-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --gh-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
    --gh-radius: 16px;
    --gh-radius-sm: 10px;
}

/* Gradient page header (hero) */
.gh-page-header {
    background: linear-gradient(135deg, var(--gh-primary) 0%, var(--gh-primary-light) 55%, #7c8cf8 100%);
    border-radius: var(--gh-radius);
    color: #fff;
    padding: 22px 26px;
    box-shadow: 0 10px 30px rgba(79, 70, 229, .25);
}

.gh-page-header h1, .gh-page-header h2, .gh-page-header h3, .gh-page-header h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: .25rem;
}

.gh-page-header .gh-muted {
    color: rgba(255,255,255,.85) !important;
}

.gh-page-header .btn-outline-primary,
.gh-page-header .btn-light {
    color: #fff;
    border-color: rgba(255,255,255,.6);
    background: transparent;
}

.gh-page-header .btn-outline-primary:hover,
.gh-page-header .btn-light:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
    color: #fff;
}

/* Stat tiles */
.gh-stat-card {
    border: 0;
    border-radius: var(--gh-radius);
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}

.gh-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(17, 24, 39, .09);
}

.gh-stat-card .card-body {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gh-stat-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.gh-stat-icon.gh-bg-blue { background: var(--gh-info-bg); color: var(--gh-info); }
.gh-stat-icon.gh-bg-amber { background: var(--gh-warning-bg); color: var(--gh-warning); }
.gh-stat-icon.gh-bg-green { background: var(--gh-success-bg); color: var(--gh-success); }
.gh-stat-icon.gh-bg-purple { background: var(--gh-purple-bg); color: var(--gh-accent); }
.gh-stat-icon.gh-bg-red { background: var(--gh-danger-bg); color: var(--gh-danger); }

.gh-stat-label {
    color: var(--gh-muted);
    font-size: 13px;
    margin-bottom: 2px;
}

.gh-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.gh-stat-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    width: 100%;
}

.gh-stat-card-link:hover { color: inherit; }

/* Section / content cards */
.gh-section-card {
    border: 0;
    border-radius: var(--gh-radius);
}

.gh-section-title {
    font-weight: 700;
    margin-bottom: 0;
}

.gh-section-title i {
    margin-left: 8px;
    color: var(--gh-primary-light);
}

/* Filter / form bar */
.gh-filter-bar .form-control,
.gh-filter-bar .form-select,
.gh-form-card .form-control,
.gh-form-card .form-select {
    border-radius: var(--gh-radius-sm);
}

.gh-filter-bar label,
.gh-form-card label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 4px;
}

.gh-filter-actions .btn,
.gh-form-card .btn {
    border-radius: var(--gh-radius-sm);
    padding: .5rem 1.3rem;
}

/* Form card (standalone add/edit pages) */
.gh-form-card {
    border: 0;
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow-sm);
}

/* Badges */
.gh-badge-soft {
    background: #eef0ff;
    color: #4338ca;
    border-radius: 999px;
    padding: .35rem .6rem;
    font-weight: 600;
    font-size: 12px;
}

.gh-badge-success {
    background: var(--gh-success-bg);
    color: var(--gh-success);
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 600;
    font-size: 12px;
}

.gh-badge-warning {
    background: var(--gh-warning-bg);
    color: #b45309;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 600;
    font-size: 12px;
}

.gh-badge-danger {
    background: var(--gh-danger-bg);
    color: var(--gh-danger);
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 600;
    font-size: 12px;
}

.gh-badge-info {
    background: var(--gh-info-bg);
    color: var(--gh-info);
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 600;
    font-size: 12px;
}

/* Tables */
.gh-table thead th,
.gh-card-body table thead th {
    background: var(--gh-soft-bg);
    border-top: 0;
    border-bottom: 1px solid var(--gh-border);
    color: #4b5563;
    font-weight: 600;
    font-size: 13px;
}

.gh-table td,
.gh-card-body table td {
    vertical-align: middle;
}

.gh-table.table-hover tbody tr:hover,
table.gh-hover tbody tr:hover {
    background-color: #f7f8fe;
}

.gh-btn-pill {
    border-radius: 999px;
    padding: .3rem .9rem;
}

/* Modals */
.gh-modal .modal-content,
.modal-content.gh-modal-content {
    border-radius: var(--gh-radius);
    border: 0;
}

/* List rows (CRUD list-group style) */
.gh-list-row {
    border: 1px solid var(--gh-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: box-shadow .15s ease;
}

.gh-list-row:hover {
    box-shadow: var(--gh-shadow-sm);
}

/* Empty state */
.gh-empty-state {
    text-align: center;
    color: var(--gh-muted);
    padding: 40px 20px;
}

/* Standalone auth / public-facing card pages (login, signup, rating) */
.gh-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gh-primary) 0%, var(--gh-primary-light) 55%, #7c8cf8 100%);
    padding: 24px;
}

.gh-auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--gh-radius);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    padding: 32px 28px;
}

.gh-muted {
    color: var(--gh-muted);
}