/* =========================================================
   SMS Webhook — Golden Blue Theme
   Shared variables & utility classes (Bootstrap 5 override)
   ========================================================= */

:root {
    /* Golden blue palette */
    --gb-blue:        #1e3a8a;   /* deep royal blue */
    --gb-blue-600:    #2545a6;
    --gb-blue-500:    #3b62d4;
    --gb-blue-400:    #5b82e6;
    --gb-blue-soft:   #e6ecff;
    --gb-blue-tint:   #f3f6ff;

    --gb-gold:        #f5b50a;   /* primary gold */
    --gb-gold-600:    #d99e06;
    --gb-gold-500:    #fbbf24;
    --gb-gold-400:    #fcd34d;
    --gb-gold-soft:   #fff7e0;

    --gb-dark:        #0f1c3f;
    --gb-darker:      #0a1530;
    --gb-body-bg:     #f4f6fb;
    --gb-card-bg:     #ffffff;
    --gb-border:      #e3e8f3;
    --gb-text:        #1f2a44;
    --gb-muted:       #6b7a99;

    --gb-success:     #16a34a;
    --gb-success-soft:#e3f7ec;
    --gb-danger:      #dc2626;
    --gb-danger-soft: #fde8e8;
    --gb-warning:     #f59e0b;
    --gb-info:        #0ea5e9;

    --gb-shadow:      0 6px 20px rgba(30, 58, 138, .08);
    --gb-shadow-lg:   0 12px 40px rgba(30, 58, 138, .14);
    --gb-radius:      12px;
    --gb-sidebar-w:   260px;
}

/* Bootstrap primary override -> gold */
.btn-gold {
    background: linear-gradient(135deg, var(--gb-gold), var(--gb-gold-600));
    color: #1a1a1a;
    border: none;
    font-weight: 600;
    letter-spacing: .2px;
}
.btn-gold:hover { background: linear-gradient(135deg, var(--gb-gold-500), var(--gb-gold)); color: #1a1a1a; }

.btn-outline-gold {
    border: 1.5px solid var(--gb-gold);
    color: var(--gb-gold-600);
    background: transparent;
    font-weight: 600;
}
.btn-outline-gold:hover { background: var(--gb-gold); color: #1a1a1a; }

.btn-blue {
    background: linear-gradient(135deg, var(--gb-blue-500), var(--gb-blue));
    color: #fff;
    border: none;
    font-weight: 600;
}
.btn-blue:hover { background: linear-gradient(135deg, var(--gb-blue), var(--gb-dark)); color: #fff; }

.btn-outline-blue {
    border: 1.5px solid var(--gb-blue);
    color: var(--gb-blue);
    background: transparent;
    font-weight: 600;
}
.btn-outline-blue:hover { background: var(--gb-blue); color: #fff; }

/* Soft badges */
.bg-blue-soft   { background: var(--gb-blue-soft) !important; }
.text-blue      { color: var(--gb-blue) !important; }
.bg-success-soft{ background: var(--gb-success-soft) !important; }
.text-success   { color: var(--gb-success) !important; }
.bg-danger-soft { background: var(--gb-danger-soft) !important; }

/* Card */
.card {
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius);
    box-shadow: var(--gb-shadow);
}
.card-header {
    background: linear-gradient(135deg, var(--gb-blue-tint), #fff);
    border-bottom: 1px solid var(--gb-border);
    padding: .85rem 1.25rem;
    font-weight: 600;
}

/* Pagination */
.pagination .page-link {
    color: var(--gb-blue);
    border-color: var(--gb-border);
}
.pagination .page-item.active .page-link {
    background: var(--gb-blue);
    border-color: var(--gb-blue);
    color: #fff;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--gb-muted);
}
.empty-state i {
    font-size: 3rem;
    color: var(--gb-blue-400);
    margin-bottom: .75rem;
    display: block;
}

/* General */
body { background: var(--gb-body-bg); color: var(--gb-text); }
a { color: var(--gb-blue); text-decoration: none; }
a:hover { color: var(--gb-blue-600); }
.text-muted { color: var(--gb-muted) !important; }