:root{
  --bg:#0f1115; --card:#171a21; --card2:#1d2129; --border:#262b35;
  --green:#25D366; --green-dark:#1da851; --blue:#3498DB; --red:#E74C3C;
  --orange:#F39C12; --text:#e7e9ee; --muted:#93989f;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--text); font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  min-height:100vh; direction:rtl;
}
a{color:var(--green); text-decoration:none}
.navbar{background:var(--card); border-bottom:1px solid var(--border)}
.navbar-brand{color:var(--green)!important; font-weight:700}
.nav-link{color:var(--text)!important}
.nav-link.active{color:var(--green)!important; font-weight:600}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; color:var(--text)}
.kpi{background:linear-gradient(145deg,var(--card2),var(--card)); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px}
.kpi .num{font-size:28px; font-weight:800; color:var(--green)}
.kpi .label{color:var(--muted); font-size:13px}
/* Force all tables onto the dark theme. Bootstrap 5 defaults table cells to a
   white background + dark text, which clashed with the dark cards and made
   btn-outline-light action buttons invisible. */
.table{--bs-table-bg:transparent; --bs-table-color:var(--text); color:var(--text)}
.table>:not(caption)>*>*{background-color:transparent; color:var(--text)}
.table thead th{color:var(--muted); border-bottom:1px solid var(--border); font-weight:600; background-color:transparent}
.table td, .table th{border-color:var(--border)!important}
.table-hover>tbody>tr:hover>*{background-color:var(--card2); color:var(--text)}
.table-dark-custom{background:var(--card)}
/* keep outline buttons legible on the dark theme */
.btn-outline-light{color:var(--text); border-color:var(--border)}
.btn-outline-light:hover{background:var(--card2); color:var(--text); border-color:var(--green)}
.btn-brand{background:var(--green); border-color:var(--green); color:#08240f; font-weight:600}
.btn-brand:hover{background:var(--green-dark); border-color:var(--green-dark); color:#08240f}
.badge-status{padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600}
.badge-Pending{background:#3a3f4b; color:#c7cbd1}
.badge-Ready{background:#1c3a2c; color:#4ee08a}
.badge-Sending{background:#3a2f14; color:var(--orange)}
.badge-Scheduled{background:#16283a; color:var(--blue)}
.badge-Sent, .badge-Delivered, .badge-Success, .badge-Active{background:#123322; color:var(--green)}
.badge-Failed, .badge-Cancelled{background:#3a1a1a; color:var(--red)}
.form-control, .form-select{background:var(--card2); border:1px solid var(--border); color:var(--text)}
.form-control:focus, .form-select:focus{background:var(--card2); color:var(--text); border-color:var(--green);
  box-shadow:0 0 0 .2rem rgba(37,211,102,.15)}
/* Placeholder text was too dark to read on the dark inputs - lighten it. */
.form-control::placeholder{color:#aeb4bd; opacity:1}
.form-control::-webkit-input-placeholder{color:#aeb4bd; opacity:1}
.form-control:-ms-input-placeholder{color:#aeb4bd; opacity:1}
/* Make sure typed text and dropdown options are always readable too. */
.form-select option{background:var(--card2); color:var(--text)}
input[type="date"], input[type="datetime-local"], input[type="number"]{color:var(--text)}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(0.8)}
.form-label{color:var(--muted); font-size:13px}
.sidebar-footer{color:var(--muted); font-size:12px; padding:14px 18px; border-top:1px solid var(--border)}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center}
.login-card{width:380px}
.text-muted-custom{color:var(--muted)}
.page-title{font-weight:700; margin-bottom:18px}