/* ============================================================
   VNumShop — public/assets/css/app.css
   Custom styles (loaded after Bootstrap 5)
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    --brand:        #6366f1;
    --brand-dark:   #4f46e5;
    --brand-light:  #ede9fe;
    --brand-rgb:    99, 102, 241;
}

/* ── Brand button ──────────────────────────────────────────── */
.btn-brand {
    background-color: var(--brand);
    border-color:     var(--brand);
    color: #fff;
    font-weight: 500;
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-dark);
    border-color:     var(--brand-dark);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), .25);
}
.btn-brand:active {
    background-color: var(--brand-dark);
    border-color:     var(--brand-dark);
    color: #fff;
}
.btn-outline-brand {
    color: var(--brand);
    border-color: var(--brand);
    background: transparent;
    font-weight: 500;
}
.btn-outline-brand:hover {
    background-color: var(--brand);
    border-color:     var(--brand);
    color: #fff;
}

/* ── Brand colors ──────────────────────────────────────────── */
.text-brand  { color: var(--brand) !important; }
.bg-brand    { background-color: var(--brand) !important; }
.bg-brand-soft { background-color: var(--brand-light) !important; }
.border-brand { border-color: var(--brand) !important; }

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* ── Form controls focus ───────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--brand-rgb), .5);
    box-shadow:   0 0 0 0.25rem rgba(var(--brand-rgb), .15);
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar-brand {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.3rem;
}
.navbar-brand span { color: var(--brand); }

/* ── Alert flash messages ──────────────────────────────────── */
.alert {
    border-radius: .75rem;
    border: none;
    font-size: .9rem;
}
.alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid #22c55e; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-left: 4px solid #ef4444; }
.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #f59e0b; }
.alert-info    { background: #eff6ff; color: #1d4ed8; border-left: 4px solid #3b82f6; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    border-radius: 1rem;
    border-color: rgba(0,0,0,.08);
}

/* ── Badges ────────────────────────────────────────────────── */
.badge-provider-twilio { background: rgba(242,47,70,.1);  color: #dc2626; }
.badge-provider-vonage { background: rgba(59,130,246,.1); color: #1d4ed8; }
.badge-provider-telnyx { background: rgba(5,150,105,.1);  color: #065f46; }

/* ── Status badges ─────────────────────────────────────────── */
.badge-status-active      { background: #f0fdf4; color: #166534; }
.badge-status-pending     { background: #fffbeb; color: #92400e; }
.badge-status-suspended   { background: #fef3c7; color: #92400e; }
.badge-status-released    { background: #f1f5f9; color: #475569; }
.badge-status-failed      { background: #fef2f2; color: #991b1b; }

/* ── Tables ────────────────────────────────────────────────── */
.table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    font-weight: 600;
    background: #f9fafb;
    border-bottom-width: 1px;
}
.table td {
    vertical-align: middle;
    font-size: .875rem;
}

/* ── Monospace numbers ─────────────────────────────────────── */
.font-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }

/* ── Number card (search results) ─────────────────────────── */
.number-card {
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.08);
    transition: border-color .15s, box-shadow .15s;
}
.number-card:hover {
    border-color: rgba(var(--brand-rgb), .35);
    box-shadow: 0 4px 20px rgba(var(--brand-rgb), .08);
}

/* ── Admin sidebar ─────────────────────────────────────────── */
.admin-sidebar .nav-link {
    color: #4b5563;
    border-radius: .5rem;
    font-size: .875rem;
    padding: .5rem .75rem;
    transition: background .1s;
}
.admin-sidebar .nav-link:hover   { background: #f3f4f6; color: #111827; }
.admin-sidebar .nav-link.active  { background: var(--brand-light); color: var(--brand); font-weight: 600; }

/* ── Unread badge in nav ───────────────────────────────────── */
.inbox-badge {
    position: absolute;
    top: -4px; right: -4px;
    width: 16px; height: 16px;
    background: #ef4444;
    border-radius: 50%;
    font-size: .6rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

/* ── Hero section (landing) ────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg, var(--brand-light) 0%, #fff 60%);
}

/* ── Pagination ────────────────────────────────────────────── */
.page-link {
    color: var(--brand);
    border-color: rgba(0,0,0,.1);
}
.page-link:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }

/* ── Danger zone ───────────────────────────────────────────── */
.danger-zone {
    border: 1px solid #fecaca;
    border-radius: 1rem;
    background: #fff5f5;
}

/* ── Auth pages ────────────────────────────────────────────── */
.auth-card { max-width: 420px; margin: 0 auto; }

/* ── Utility ───────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ── Page hero header (centered titles) ───────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #312e81 100%);
  padding: 48px 0 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(99,102,241,.1); pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute; bottom: -40px; left: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(99,102,241,.07); pointer-events: none;
}
.page-hero .hero-title {
  font-size: 2rem; font-weight: 800; color: #fff;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.page-hero .hero-subtitle {
  font-size: .92rem; color: #94a3b8;
  position: relative; z-index: 1; margin-bottom: 0;
}
.page-hero .hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(99,102,241,.2); border: 1px solid rgba(99,102,241,.3);
  color: #a5b4fc; font-size: .75rem; font-weight: 700;
  border-radius: 20px; padding: 4px 14px;
  margin-bottom: 14px; position: relative; z-index: 1;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Country picker overflow fix */
.hero-country-drop { overflow: hidden; }
.hero-cc-item { overflow: hidden; text-overflow: ellipsis; }
.search-card .row { align-items: flex-end; }
.search-card .col-12, .search-card .col-md-4,
.search-card .col-md-2, .search-card .col-md-3 { min-width: 0; }

/* Prevent form deformation */
.search-card form { width: 100%; box-sizing: border-box; }
.search-card * { box-sizing: border-box; }
.search-card { overflow: visible !important; }