/* GG Dashboard Design System v1 */
:root {
    --page-bg: #f4f7fb;
    --surface: #ffffff;
    --border: #e2e9f1;
    --text: #172b4d;
    --muted: #6c7c90;
    --blue: #005ed6;
    --blue-dark: #001a36;
    --blue-soft: #eaf3ff;
    --shadow: 0 12px 32px rgba(17, 43, 77, .08);
}

html,
body {
    background: var(--page-bg);
    color: var(--text);
}

.site-header {
    background: rgba(255, 255, 255, .97);
    border-bottom-color: #e4eaf1;
    box-shadow: 0 2px 14px rgba(16, 42, 74, .05);
}

.nav-wrap {
    min-height: 76px;
}

.page {
    padding: 38px 0 80px;
}

.app-shell {
    gap: 30px;
    padding-top: 30px;
}

.card,
.feed-post,
.composer-card,
.profile-card,
.messages-sidebar,
.notification-item {
    border-color: var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.card {
    padding: 28px;
}

.feed-post,
.composer-card {
    background: var(--surface);
}

input,
textarea,
select {
    border-color: #d4dee9;
    border-radius: 11px;
    background: #fff;
    color: var(--text);
}

input:hover,
textarea:hover,
select:hover {
    border-color: #b8c9dc;
}

input:focus,
textarea:focus,
select:focus {
    outline: 3px solid rgba(0, 94, 214, .12);
    border-color: #4b96ed;
}

.button,
.btn-primary,
.primary-button {
    background: #005ed6;
    color: #fff;
    border-radius: 11px;
    box-shadow: 0 8px 18px rgba(0, 94, 214, .18);
}

.button:hover,
.btn-primary:hover,
.primary-button:hover {
    background: #004fb5;
    filter: none;
}

.button.secondary {
    background: #edf4fd;
    color: #0054bd;
    box-shadow: none;
}

.button.danger {
    background: #c83d3d;
}

.notification-button:hover,
.notification-button.is-active {
    background: #eaf3ff;
    color: #005ed6;
}

.notification-item {
    background: #fff;
    color: #213853;
}

.notification-item:hover {
    border-color: #adcceb;
}

.notification-item.is-unread {
    background: #f4f9ff;
    border-color: #c9def6;
}

.composer-row textarea,
.comment-bubble {
    background: #f5f8fc;
}

.post-item,
.moderation-item {
    border-color: #e4eaf1;
    border-radius: 14px;
}

.table-wrap {
    border: 1px solid #e4eaf1;
    border-radius: 14px;
    background: #fff;
}

th {
    background: #f7f9fc;
    color: #607188;
}

th,
td {
    border-bottom-color: #e8edf3;
}

.table-action,
.ggp-post-footer a {
    color: #005ed6;
}

.alert {
    border: 1px solid transparent;
}

.alert.success {
    border-color: #c5ead2;
}

.alert.error {
    border-color: #f2cccc;
}

@media (max-width: 900px) {
    .app-shell {
        padding-top: 18px;
        padding-bottom: 56px;
    }

    .page {
        padding-top: 24px;
    }
}

@media (max-width: 650px) {
    .nav-wrap {
        min-height: 64px;
    }

    .card {
        padding: 20px;
        border-radius: 16px;
    }

    .feed-post,
    .composer-card,
    .profile-card,
    .messages-sidebar,
    .notification-item {
        border-radius: 16px;
    }
}