@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   Original app rules (kept)
   ============================================================ */
input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control {
    line-height: 19px;
}
.timeline-body { word-wrap: break-word; }
.timeline-footer { display: flex; flex-flow: row wrap; }
.timeline-footer label { padding: 0.5rem 0.6rem; }
textarea { max-width: 100%; max-height: 100%; resize: vertical; }
.dropzone { border: 2px dashed #1B72E9; border-radius: 12px; background: #fbfcfe; }
@media only screen and (max-width: 768px) { .select-user { width: 220px } }
@media only screen and (max-width: 768px) { .select-contacts-list { width: 125px } }

/* ============================================================
   smsbird brand system
   #FAB713 yellow · #1B72E9 blue · #2E2E2E charcoal · #FFFFFF
   ============================================================ */
:root {
    --sb-yellow: #FAB713;
    --sb-yellow-600: #E6A50C;
    --sb-blue: #1B72E9;
    --sb-blue-600: #155fc4;
    --sb-ink: #2E2E2E;
    --sb-muted: #6b7280;
    --sb-line: #e7e9ee;
    --sb-bg: #f4f5f7;
    --sb-radius: 12px;
}

/* ---- Typography ---- */
body, .content-wrapper, .main-sidebar, .navbar, .btn, .form-control, .login-page,
h1, h2, h3, h4, h5, h6, .box-title, button, input, select, textarea, table {
    font-family: 'Public Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
body { color: #3a3f47; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3,h4,h5,h6,.box-title { color: var(--sb-ink); font-weight: 700; }
a { color: var(--sb-blue); }
a:hover, a:focus { color: var(--sb-blue-600); }

/* ---- Buttons ---- */
.btn { border-radius: 8px; font-weight: 600; transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-flat { border-radius: 8px; }
.btn-primary {
    background-color: var(--sb-yellow); border-color: var(--sb-yellow); color: #2a2400;
    box-shadow: 0 2px 0 var(--sb-yellow-600);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--sb-yellow-600); border-color: var(--sb-yellow-600); color: #2a2400;
}
.btn-info { background-color: var(--sb-blue); border-color: var(--sb-blue); color: #fff; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--sb-blue-600); border-color: var(--sb-blue-600); }
.btn-default { background:#fff; border-color: var(--sb-line); color: #4a4f57; }
.btn-default:hover { background:#f6f7f9; border-color:#d7dbe2; }
.btn-link { color: var(--sb-blue); }

/* ---- Form controls ---- */
.form-control {
    border-radius: 9px; border-color: var(--sb-line); color: #2f343b;
    box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--sb-yellow); box-shadow: 0 0 0 3px rgba(250,183,19,.20);
}
.input-group .form-control { box-shadow: none; }
.input-group-addon { background: #fafbfc; border-color: var(--sb-line); color: var(--sb-muted); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border-color: var(--sb-line) !important; border-radius: 9px !important; }

/* ---- Cards / boxes ---- */
.box {
    border-radius: var(--sb-radius); border: 1px solid var(--sb-line);
    box-shadow: 0 1px 3px rgba(20,23,28,.05), 0 1px 2px rgba(20,23,28,.04);
    border-top-width: 1px;
}
.box.box-primary { border-top: 3px solid var(--sb-yellow); }
.box.box-info    { border-top: 3px solid var(--sb-blue); }
.box.box-success { border-top: 3px solid #2bb673; }
.box.box-warning { border-top: 3px solid var(--sb-yellow); }
.box.box-danger  { border-top: 3px solid #ef4d5e; }
.box-header { border-radius: var(--sb-radius) var(--sb-radius) 0 0; }
.box-header.with-border { border-bottom: 1px solid var(--sb-line); }
.box-header .box-title { font-size: 17px; }

/* ---- Dashboard stat widgets ---- */
.small-box { border-radius: var(--sb-radius); box-shadow: 0 2px 6px rgba(20,23,28,.08); overflow: hidden; }
.small-box > .inner h3 { font-weight: 800; }
.small-box .icon { opacity: .25; }
.bg-yellow, .small-box.bg-yellow, .label-warning, .bg-orange { background-color: var(--sb-yellow) !important; color: #2a2400 !important; }
.bg-aqua, .small-box.bg-aqua, .bg-blue, .small-box.bg-blue { background-color: var(--sb-blue) !important; }
.info-box { border-radius: var(--sb-radius); box-shadow: 0 1px 3px rgba(20,23,28,.06); }
.info-box-icon { border-radius: var(--sb-radius) 0 0 var(--sb-radius); }
.progress-bar-yellow, .progress-bar-warning { background-color: var(--sb-yellow); }
.progress-bar-aqua, .progress-bar-primary { background-color: var(--sb-blue); }

/* ---- Misc accents ---- */
.label-primary, .badge { background-color: var(--sb-blue); }
.label-warning { color: #2a2400; }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--sb-yellow); }
.nav-tabs-custom > .nav-tabs > li.active > a { color: var(--sb-ink); }
.pagination > .active > a, .pagination > .active > a:hover { background: var(--sb-blue); border-color: var(--sb-blue); }
.callout.callout-info { background-color: var(--sb-blue) !important; }
table.dataTable thead th { color: var(--sb-ink); }
a.text-yellow, .text-yellow { color: var(--sb-yellow) !important; }

/* ============================================================
   LOGIN  —  brand moment
   ============================================================ */
body.login-page {
    min-height: 100vh;
    background: radial-gradient(120% 120% at 80% -10%, #FFD24D 0%, #FAB713 42%, #F3A50A 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
/* pulsing concentric signal rings (the bird "broadcasts") */
body.login-page::before {
    content: ""; position: absolute; left: 50%; top: 46%;
    width: 1400px; height: 1400px; transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, transparent 0 14%, rgba(255,255,255,.14) 14% 14.5%, transparent 14.5% 100%),
        radial-gradient(circle, transparent 0 24%, rgba(255,255,255,.12) 24% 24.4%, transparent 24.4% 100%),
        radial-gradient(circle, transparent 0 34%, rgba(255,255,255,.10) 34% 34.3%, transparent 34.3% 100%),
        radial-gradient(circle, transparent 0 44%, rgba(255,255,255,.08) 44% 44.3%, transparent 44.3% 100%);
    animation: sbPulse 7s ease-in-out infinite; pointer-events: none;
}
/* charcoal corner blob + grain for depth */
body.login-page::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(40% 50% at -8% 110%, rgba(46,46,46,.16) 0%, transparent 60%),
        radial-gradient(36% 42% at 108% -8%, rgba(27,114,233,.18) 0%, transparent 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
@keyframes sbPulse { 0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.9} 50%{transform:translate(-50%,-50%) scale(1.06); opacity:1} }

.login-page .login-box { width: 412px; max-width: 94vw; position: relative; z-index: 2; }

/* logo + wordmark */
.login-page .login-logo { margin-bottom: 22px; animation: sbDrop .7s cubic-bezier(.2,.8,.2,1) both; }
.login-page .login-logo a {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: #2E2E2E; font-weight: 800; font-size: 30px; letter-spacing: 1px; text-transform: uppercase;
}
.login-page .login-logo a img {
    width: 84px !important; height: 84px !important;
    filter: drop-shadow(0 8px 16px rgba(40,30,0,.22));
}
.login-page .login-logo a::after {
    content: "SMS made easy";
    font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(46,46,46,.6); margin-top: -4px;
}

/* the card */
.login-page .login-box-body {
    position: relative; background: #fff; border: 0; border-radius: 22px;
    padding: 34px 30px 30px; overflow: hidden;
    box-shadow: 0 30px 60px -18px rgba(60,45,0,.45), 0 6px 18px rgba(60,45,0,.12);
    animation: sbRise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: .06s;
}
/* signature blue corner tab (moodboard) */
.login-page .login-box-body::before {
    content: ""; position: absolute; top: 0; left: 0; width: 74px; height: 74px;
    background: linear-gradient(135deg, #2a86ff 0%, #1B72E9 70%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.login-page .login-box-body::after {
    content: ""; position: absolute; top: 12px; left: 11px; width: 13px; height: 13px;
    border-radius: 50%; background: #fff; opacity: .9;
}
.login-page .login-box-msg {
    color: var(--sb-muted); font-size: 14.5px; padding: 4px 0 20px; margin: 0; font-weight: 500;
}

/* inputs */
.login-page .login-box-body .form-group { margin-bottom: 16px; }
.login-page .form-control {
    height: 50px; border-radius: 12px; border: 1.5px solid #e6e8ee;
    background: #f8f9fb; padding-left: 16px; font-size: 15px;
}
.login-page .form-control:focus { background: #fff; border-color: var(--sb-yellow); box-shadow: 0 0 0 4px rgba(250,183,19,.18); }
.login-page .has-feedback .form-control-feedback { line-height: 50px; width: 46px; color: #b6bcc6; }
.login-page .form-control:focus ~ .form-control-feedback { color: var(--sb-yellow-600); }

/* row: forgot link + button -> stack & make button a yellow pill */
.login-page #loginForm .row { display: flex; flex-direction: column-reverse; gap: 14px; margin: 0; }
.login-page #loginForm .row > [class*="col-"] { width: 100%; padding: 0; text-align: center; }
.login-page #signInButton {
    height: 52px; border-radius: 999px; font-size: 16px; font-weight: 800; letter-spacing: .3px;
    background: var(--sb-yellow); border: 0; color: #2a2400; width: 100%;
    box-shadow: 0 8px 18px -6px rgba(250,183,19,.7), 0 2px 0 var(--sb-yellow-600);
}
.login-page #signInButton:hover { background: #ffc62e; transform: translateY(-1px); box-shadow: 0 12px 22px -6px rgba(250,183,19,.8); }
.login-page #loginForm .row a { color: var(--sb-blue); font-weight: 600; font-size: 14px; }
.login-page #loginForm .row a:hover { color: var(--sb-blue-600); text-decoration: underline; }

/* register footer */
.login-page .box-footer {
    background: transparent; border: 0; text-align: center; color: var(--sb-ink);
    margin-top: 18px; padding: 16px; border-radius: 14px;
    background: rgba(255,255,255,.55); backdrop-filter: blur(4px);
}
.login-page .box-footer a { color: var(--sb-blue); font-weight: 700; }

/* alerts on login */
.login-page .alert { border-radius: 12px; border: 0; }

/* language selector — tuck top-right, subtle */
.login-page .language-form, .login-page #languageForm { position: absolute; top: 18px; right: 18px; z-index: 5; }
.login-page #languageForm select.form-control { height: 40px; border-radius: 10px; background: rgba(255,255,255,.85); border: 0; font-weight: 600; color: var(--sb-ink); }

/* entrance keyframes */
@keyframes sbRise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sbDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
    .login-page .login-box-body { padding: 28px 20px 24px; border-radius: 18px; }
    .login-page .login-logo a { font-size: 26px; }
}

/* ---- Highlighted "Download App" item in the sidebar ---- */
.sidebar-menu > li.app-download > a,
.skin-smsbird .sidebar-menu > li.app-download > a {
    background: var(--sb-yellow); color: #2a2400;
    margin: 8px 12px; border-radius: 10px; font-weight: 800;
    border-left: 0 !important; box-shadow: 0 6px 14px -6px rgba(250,183,19,.8);
    transition: background .15s ease, transform .1s ease;
}
.sidebar-menu > li.app-download > a:hover,
.skin-smsbird .sidebar-menu > li.app-download > a:hover {
    background: #ffc62e; color: #2a2400; transform: translateY(-1px);
}
.skin-smsbird .sidebar-menu > li.app-download > a > .fa { color: #2a2400; }
.sidebar-collapse .sidebar-menu > li.app-download > a { margin: 6px; }