/* SMS-to-Email Gateway — Custom Styles */

:root {
    --sidebar-width: 240px;
}

body {
    background-color: #f0f2f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container-fluid {
    flex: 1;
    max-width: 1400px;
}

/* ── Page title ───────────────────────────────────────── */
.page-title {
    color: #1a3a5c;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
}

/* ── Navbar tweaks ────────────────────────────────────── */
.navbar-brand { font-size: 1.1rem; letter-spacing: .02em; }
.navbar-nav .nav-link { padding: .5rem .85rem; border-radius: .375rem; transition: background .15s; }
.navbar-nav .nav-link:hover  { background: rgba(255,255,255,.12); }
.navbar-nav .nav-link.active { background: rgba(255,255,255,.2); font-weight: 600; }

/* ── Cards ────────────────────────────────────────────── */
.card { box-shadow: 0 1px 4px rgba(0,0,0,.08); border: none; }
.card-header { font-weight: 600; background: #fff; border-bottom: 1px solid #e9ecef; }

/* ── Stat cards on Dashboard ─────────────────────────── */
.stat-card {
    border-left: 4px solid;
    transition: transform .15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card .stat-icon { font-size: 2.5rem; opacity: .25; }
.stat-card.stat-primary   { border-color: #0d6efd; }
.stat-card.stat-success   { border-color: #198754; }
.stat-card.stat-warning   { border-color: #ffc107; }
.stat-card.stat-danger    { border-color: #dc3545; }

/* ── Message log table ───────────────────────────────── */
.table-sms th { background: #f8f9fa; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.badge-sent    { background: #d1e7dd; color: #0f5132; }
.badge-failed  { background: #f8d7da; color: #842029; }
.badge-no-map  { background: #fff3cd; color: #664d03; }

/* ── Login page ──────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d6efd 0%, #0a3d91 100%);
}
.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 1rem;
    padding: 2rem;
}
.login-logo { font-size: 2.5rem; color: #0d6efd; }

/* ── Template editor ─────────────────────────────────── */
.template-variables span {
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    user-select: none;
}
.template-variables span:hover { opacity: .8; }

/* ── Phone number selector ───────────────────────────── */
.phone-option {
    padding: .5rem .75rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    margin-bottom: .35rem;
    cursor: pointer;
    transition: all .15s;
}
.phone-option:hover, .phone-option.selected {
    border-color: #0d6efd;
    background: #e7f1ff;
}

/* ── Settings sections ───────────────────────────────── */
.settings-section-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6c757d;
    margin-bottom: .5rem;
    margin-top: 1rem;
    font-weight: 600;
}

/* ── Monospace for phone numbers ─────────────────────── */
.phone-mono { font-family: 'Courier New', monospace; letter-spacing: .04em; }

/* ── Footer ──────────────────────────────────────────── */
footer { font-size: .8rem; }