/* Material Design 3 — style layer on top of Bootstrap RTL */
:root {
  --md-primary: #3f51b5;
  --md-on-primary: #fff;
  --md-primary-container: #e0e3ff;
  --md-on-primary-container: #1a237e;
  --md-surface: #fdfbff;
  --md-surface-1: #f3f3fa;
  --md-surface-2: #eceef7;
  --md-on-surface: #1b1b21;
  --md-on-surface-variant: #5c5d6b;
  --md-outline: #c6c6d0;
  --md-error: #ba1a1a;
  --md-error-container: #ffdad6;
  --md-elev-1: 0 1px 2px rgba(0,0,0,.18), 0 1px 3px 1px rgba(0,0,0,.08);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.2), 0 2px 6px 2px rgba(0,0,0,.1);
  --md-radius: 16px;
}

html { font-size: 15px; }

body {
  font-family: "Vazirmatn", system-ui, sans-serif;
  background: var(--md-surface-1);
  color: var(--md-on-surface);
  min-height: 100vh;
}

.material-symbols-rounded {
  font-size: 20px;
  vertical-align: middle;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

/* Top app bar */
.md-appbar {
  position: sticky; top: 0; z-index: 1030;
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elev-2);
}
.md-appbar .container { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.md-appbar .brand { color: inherit; text-decoration: none; font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.md-appbar .spacer { flex: 1; }
.md-appbar .user { opacity: .85; font-size: .9rem; }

/* Buttons */
.md-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 20px; border-radius: 20px; border: 0;
  font-weight: 500; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: box-shadow .15s, background-color .15s;
}
.md-btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.md-btn-filled:hover { box-shadow: var(--md-elev-1); color: var(--md-on-primary); filter: brightness(1.08); }
.md-btn-tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-btn-tonal:hover { box-shadow: var(--md-elev-1); color: var(--md-on-primary-container); }
.md-btn-text { background: transparent; color: inherit; }
.md-btn-text:hover { background: rgba(255,255,255,.14); color: inherit; }
.md-icon-btn { width: 40px; padding: 0; }

/* Surfaces */
.md-card {
  background: var(--md-surface);
  border-radius: var(--md-radius);
  box-shadow: var(--md-elev-1);
  border: 0;
}

/* Outlined text field */
.md-field { position: relative; }
.md-field label {
  position: absolute; top: -9px; right: 12px; padding: 0 4px;
  font-size: .78rem; color: var(--md-on-surface-variant); background: var(--md-surface);
  z-index: 1;
}
.md-field .form-control {
  height: 48px; border-radius: 8px; border: 1px solid var(--md-outline); background: var(--md-surface);
}
.md-field .form-control:focus { border: 2px solid var(--md-primary); box-shadow: none; }
.md-field:focus-within label { color: var(--md-primary); }
.md-field .form-control::placeholder { color: #a9aab6; opacity: 1; }

/* Data table (desktop) */
.md-table { margin: 0; }
.md-table thead th {
  background: var(--md-surface-2); color: var(--md-on-surface-variant);
  font-weight: 600; font-size: .85rem; border-bottom: 1px solid var(--md-outline); white-space: nowrap;
  padding: 14px 16px;
}
.md-table td { padding: 14px 16px; vertical-align: top; border-color: var(--md-surface-2); }
.md-table tbody tr:hover { background: var(--md-surface-1); }
.md-table .sms-text { white-space: pre-wrap; line-height: 1.8; }
.md-table .date { direction: ltr; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Pagination (desktop) */
.md-pagination { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 16px; margin: 0; list-style: none; }
.md-pagination a, .md-pagination span {
  min-width: 40px; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; text-decoration: none; color: var(--md-on-surface);
}
.md-pagination a:hover { background: var(--md-surface-2); }
.md-pagination .active { background: var(--md-primary); color: var(--md-on-primary); }
.md-pagination .disabled { opacity: .35; pointer-events: none; }

/* SMS cards (mobile) */
.sms-card { padding: 14px 16px; margin-bottom: 12px; }
.sms-card .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--md-on-surface-variant); font-size: .8rem; }
.sms-card .chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 8px;
  background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: .78rem;
  direction: ltr;
}
.sms-card .body { white-space: pre-wrap; line-height: 1.9; margin: 10px 0 8px; word-break: break-word; }
.sms-card .server-time { color: var(--md-on-surface-variant); font-size: .75rem; direction: ltr; text-align: right; }

.md-loader { display: flex; justify-content: center; padding: 16px; color: var(--md-on-surface-variant); }
.md-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--md-primary-container); border-top-color: var(--md-primary);
  animation: md-spin .8s linear infinite;
}
@keyframes md-spin { to { transform: rotate(360deg); } }

.md-alert { border-radius: 12px; padding: 12px 16px; background: var(--md-error-container); color: var(--md-error); }
.md-count { color: var(--md-on-surface-variant); font-size: .9rem; }
.md-empty { text-align: center; color: var(--md-on-surface-variant); padding: 40px 16px; }
.md-empty .material-symbols-rounded { font-size: 48px; display: block; margin-bottom: 8px; }

@media (max-width: 767.98px) {
  .md-filter .col-6, .md-filter .col-12 { padding-inline: 6px; }
  .md-appbar .user { display: none; }
}