/**
 * Tutor — global template stylesheet
 * Loaded on all tutor pages (app.php, logged-in UI).
 * Auth pages have their own dedicated CSS (template_tutor_login.css, etc.).
 * Chat page scoped to .tutor-app is handled by template_tutor_chat.css.
 */

/* ─── Google Fonts import ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ─── Design tokens ─────────────────────────────────── */
:root {
  --tutor-navy:        #050d1a;
  --tutor-panel:       #0f1f38;
  --tutor-panel-light: #152a4a;
  --tutor-border:      rgba(26, 108, 246, 0.18);
  --tutor-blue:        #1a6cf6;
  --tutor-cyan:        #00d4ff;
  --tutor-text:        #e8f0fe;
  --tutor-muted:       #8fa3bb;
  --tutor-danger:      #ef4444;
  --tutor-success:     #10b981;
  --tutor-warning:     #f59e0b;
  --tutor-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.35);
  --tutor-shadow-md:   0 8px 32px rgba(0, 0, 0, 0.5);
  --tutor-radius:      12px;
  --tutor-radius-sm:   8px;
  --tutor-font-ui:     'DM Sans', sans-serif;
  --tutor-font-head:   'Sora', sans-serif;
}

/* ─── Base ──────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--tutor-font-ui);
  background: var(--tutor-navy);
  color: var(--tutor-text);
}

/* Do not override the chat page (scoped to .tutor-app) */
body:not(:has(.tutor-app)) h1,
body:not(:has(.tutor-app)) h2,
body:not(:has(.tutor-app)) h3,
body:not(:has(.tutor-app)) h4,
body:not(:has(.tutor-app)) h5 {
  font-family: var(--tutor-font-head);
  color: var(--tutor-text);
}

/* Fallback for browsers without :has() support */
h1, h2, h3, h4, h5 {
  font-family: var(--tutor-font-head);
  color: var(--tutor-text);
}

a {
  color: var(--tutor-blue);
  transition: color 0.2s;
}

a:hover {
  color: var(--tutor-cyan);
  text-decoration: none;
}

/* ─── App shell ─────────────────────────────────────── */
body > .container-fluid,
body > .container {
  background: var(--tutor-navy);
}

/* ─── Bootstrap panel override ──────────────────────── */
.panel {
  background: rgba(15, 31, 56, 0.85);
  border: 1px solid var(--tutor-border);
  border-radius: var(--tutor-radius);
  box-shadow: var(--tutor-shadow-sm);
}

.panel-heading,
.panel-title {
  font-family: var(--tutor-font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--tutor-text);
  background: transparent;
  border-bottom: 1px solid var(--tutor-border);
  padding: 14px 18px;
}

.panel-body {
  padding: 18px;
  color: var(--tutor-text);
}

.panel-footer {
  background: rgba(15, 31, 56, 0.5);
  border-top: 1px solid var(--tutor-border);
  padding: 12px 18px;
}

/* ─── Tutor card component ──────────────────────────── */
.tutor-card {
  background: rgba(15, 31, 56, 0.85);
  border: 1px solid var(--tutor-border);
  border-radius: var(--tutor-radius);
  padding: 20px;
  box-shadow: var(--tutor-shadow-sm);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.tutor-card:hover {
  border-color: rgba(26, 108, 246, 0.35);
  box-shadow: var(--tutor-shadow-md);
}

.tutor-card-header {
  font-family: var(--tutor-font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tutor-text);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tutor-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tutor-card-header .tutor-card-badge {
  font-family: var(--tutor-font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(26, 108, 246, 0.15);
  border: 1px solid var(--tutor-border);
  color: var(--tutor-blue);
  letter-spacing: 0.04em;
}

/* ─── Section title ─────────────────────────────────── */
.tutor-section-title {
  font-family: var(--tutor-font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tutor-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tutor-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tutor-border);
}

/* ─── Buttons ───────────────────────────────────────── */
.tutor-btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--tutor-blue) 0%, var(--tutor-cyan) 100%);
  border: none;
  color: #fff;
  font-family: var(--tutor-font-ui);
  font-weight: 600;
  border-radius: var(--tutor-radius-sm);
  padding: 8px 18px;
  box-shadow: 0 4px 14px rgba(26, 108, 246, 0.3);
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
}

.tutor-btn-primary:hover,
.btn.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26, 108, 246, 0.4);
  color: #fff;
}

.tutor-btn-secondary,
.btn.btn-default {
  background: rgba(26, 108, 246, 0.1);
  border: 1px solid var(--tutor-border);
  color: var(--tutor-text);
  font-family: var(--tutor-font-ui);
  font-weight: 500;
  border-radius: var(--tutor-radius-sm);
  padding: 8px 18px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}

.tutor-btn-secondary:hover,
.btn.btn-default:hover {
  background: rgba(26, 108, 246, 0.18);
  border-color: rgba(26, 108, 246, 0.35);
  color: var(--tutor-text);
}

.btn.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  border-radius: var(--tutor-radius-sm);
  font-family: var(--tutor-font-ui);
  font-weight: 500;
  transition: background 0.2s;
}

.btn.btn-danger:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

.btn.btn-success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
  border-radius: var(--tutor-radius-sm);
  font-family: var(--tutor-font-ui);
  font-weight: 500;
  transition: background 0.2s;
}

.btn.btn-success:hover {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

/* ─── Form fields ───────────────────────────────────── */
.form-control {
  background: rgba(5, 13, 26, 0.7);
  border: 1px solid var(--tutor-border);
  color: var(--tutor-text);
  border-radius: var(--tutor-radius-sm);
  font-family: var(--tutor-font-ui);
  font-size: 0.9rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.form-control:focus {
  background: rgba(5, 13, 26, 0.85);
  border-color: var(--tutor-blue);
  box-shadow: 0 0 0 3px rgba(26, 108, 246, 0.15);
  color: var(--tutor-text);
  outline: none;
}

.form-control::placeholder {
  color: rgba(143, 163, 187, 0.45);
}

.form-group label,
.control-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tutor-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.help-block {
  font-size: 0.8rem;
  color: var(--tutor-muted);
  margin-top: 5px;
}

/* ─── Tutor field component ─────────────────────────── */
.tutor-field {
  margin-bottom: 16px;
}

.tutor-field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tutor-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* ─── Alerts ────────────────────────────────────────── */
.alert {
  border-radius: var(--tutor-radius-sm);
  font-size: 0.875rem;
  padding: 12px 16px;
  border-width: 1px;
  border-style: solid;
}

.alert-info {
  background: rgba(26, 108, 246, 0.08);
  border-color: rgba(26, 108, 246, 0.25);
  color: #93c5fd;
}

.alert-success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

.alert-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

/* ─── Tables ────────────────────────────────────────── */
.table {
  color: var(--tutor-text);
  border-color: var(--tutor-border);
}

.table > thead > tr > th {
  font-family: var(--tutor-font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tutor-muted);
  border-bottom: 1px solid var(--tutor-border);
  background: rgba(15, 31, 56, 0.5);
  padding: 10px 12px;
}

.table > tbody > tr > td {
  border-top: 1px solid rgba(26, 108, 246, 0.08);
  padding: 10px 12px;
  font-size: 0.875rem;
  color: var(--tutor-text);
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(26, 108, 246, 0.04);
}

.table > tbody > tr:hover {
  background: rgba(26, 108, 246, 0.07);
}

/* ─── Badges & labels ───────────────────────────────── */
.label,
.badge {
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
  letter-spacing: 0.04em;
}

.label-primary,
.badge-primary {
  background: rgba(26, 108, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(26, 108, 246, 0.3);
}

.label-success,
.badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.label-warning,
.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.label-danger,
.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.label-default,
.badge-default {
  background: rgba(143, 163, 187, 0.12);
  color: var(--tutor-muted);
  border: 1px solid rgba(143, 163, 187, 0.2);
}

/* ─── Navbar / header ───────────────────────────────── */
.navbar,
.navbar-default {
  background: rgba(15, 31, 56, 0.95);
  border-bottom: 1px solid var(--tutor-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar-brand,
.navbar-default .navbar-brand {
  font-family: var(--tutor-font-head);
  font-weight: 700;
  color: var(--tutor-text) !important;
  letter-spacing: -0.02em;
}

.navbar-default .navbar-nav > li > a {
  color: var(--tutor-muted);
  font-size: 0.875rem;
  transition: color 0.2s;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a {
  color: var(--tutor-text);
  background: transparent;
}

/* ─── Sidebar menu ──────────────────────────────────── */
.nav-pills > li > a {
  border-radius: var(--tutor-radius-sm);
  color: var(--tutor-muted);
  font-size: 0.875rem;
  transition: background 0.2s, color 0.2s;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: rgba(26, 108, 246, 0.15);
  color: var(--tutor-text);
  border: 1px solid var(--tutor-border);
}

.nav-pills > li > a:hover {
  background: rgba(26, 108, 246, 0.08);
  color: var(--tutor-text);
}

/* ─── Dropdowns ─────────────────────────────────────── */
.dropdown-menu {
  background: rgba(15, 31, 56, 0.97);
  border: 1px solid var(--tutor-border);
  border-radius: var(--tutor-radius-sm);
  box-shadow: var(--tutor-shadow-md);
}

.dropdown-menu > li > a {
  color: var(--tutor-text);
  font-size: 0.875rem;
  transition: background 0.15s;
}

.dropdown-menu > li > a:hover {
  background: rgba(26, 108, 246, 0.12);
  color: var(--tutor-text);
}

.dropdown-menu .divider {
  background: var(--tutor-border);
}

/* ─── Modals ────────────────────────────────────────── */
.modal-content {
  background: rgba(15, 31, 56, 0.97);
  border: 1px solid var(--tutor-border);
  border-radius: var(--tutor-radius);
  box-shadow: var(--tutor-shadow-md);
  color: var(--tutor-text);
}

.modal-header {
  border-bottom: 1px solid var(--tutor-border);
  padding: 16px 20px;
}

.modal-title {
  font-family: var(--tutor-font-head);
  font-weight: 700;
  color: var(--tutor-text);
}

.modal-footer {
  border-top: 1px solid var(--tutor-border);
}

.modal-backdrop {
  background: rgba(5, 13, 26, 0.75);
}

.close {
  color: var(--tutor-muted);
  opacity: 1;
  transition: color 0.2s;
}

.close:hover {
  color: var(--tutor-text);
}

/* ─── HR / dividers ─────────────────────────────────── */
hr {
  border-color: var(--tutor-border);
}

/* ─── Code ──────────────────────────────────────────── */
code, pre {
  background: rgba(5, 13, 26, 0.8);
  border: 1px solid var(--tutor-border);
  border-radius: 6px;
  color: #00d4ff;
  font-size: 0.82rem;
}

pre {
  padding: 12px 14px;
  overflow-x: auto;
}

code {
  padding: 2px 6px;
}

/* ─── Text utilities ────────────────────────────────── */
.tutor-muted {
  color: var(--tutor-muted);
  font-size: 0.875rem;
}

.tutor-blue {
  color: var(--tutor-blue);
}

.tutor-cyan {
  color: var(--tutor-cyan);
}

.text-muted {
  color: var(--tutor-muted) !important;
}

.text-warning {
  color: #fcd34d !important;
}

.text-success {
  color: #6ee7b7 !important;
}

.text-danger {
  color: #fca5a5 !important;
}

/* ─── Channel icons (notification prefs) ─────────────── */
.tutor-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.tutor-channel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--tutor-radius-sm);
  background: rgba(26, 108, 246, 0.06);
  border: 1px solid var(--tutor-border);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-size: 0.875rem;
  color: var(--tutor-muted);
}

.tutor-channel-item:has(input:checked),
.tutor-channel-item.active {
  background: rgba(26, 108, 246, 0.14);
  border-color: rgba(26, 108, 246, 0.35);
  color: var(--tutor-text);
}

/* ─── Inline invite link box ────────────────────────── */
.tutor-invite-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(5, 13, 26, 0.6);
  border: 1px solid var(--tutor-border);
  border-radius: var(--tutor-radius-sm);
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--tutor-muted);
  word-break: break-all;
}

.tutor-invite-link-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--tutor-cyan);
  font-size: 0.8rem;
  outline: none;
  min-width: 0;
}

/* ─── Scrollbar (webkit) ────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 31, 56, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(26, 108, 246, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 108, 246, 0.5);
}

/* ─── Support invite panel (tutor_settings / tutor_users) ─ */
.tutor-ws-status p {
  margin: 0 0 8px;
  color: var(--tutor-text);
  font-size: 0.95rem;
}

.tutor-ws-status strong {
  color: var(--tutor-cyan);
}

.tutor-invite-panel {
  margin-top: 20px;
  padding: 20px;
  background: var(--tutor-panel);
  border: 1px solid var(--tutor-border);
  border-radius: var(--tutor-radius);
  box-shadow: var(--tutor-shadow-sm);
}

.tutor-invite-title {
  font-family: var(--tutor-font-head);
  color: var(--tutor-cyan);
  margin-top: 0;
}

.tutor-invite-link-row,
.tutor-invite-qr-section,
.tutor-invite-email-form {
  margin-bottom: 18px;
}

.tutor-invite-panel .control-label {
  color: var(--tutor-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tutor-invite-link-input {
  background: var(--tutor-panel-light) !important;
  color: var(--tutor-text) !important;
  border-color: var(--tutor-border) !important;
}

.tutor-invite-qr-wrap {
  display: inline-block;
  padding: 12px;
  background: #fff;
  border-radius: var(--tutor-radius-sm);
  margin-bottom: 10px;
}

.tutor-invite-qr-box img,
.tutor-invite-qr-box canvas {
  display: block;
}

.tutor-invite-emails {
  background: var(--tutor-panel-light) !important;
  color: var(--tutor-text) !important;
  border-color: var(--tutor-border) !important;
}

.tutor-invite-panel .btn-primary {
  background: var(--tutor-blue);
  border-color: var(--tutor-blue);
}

.tutor-invite-panel .btn-default {
  background: var(--tutor-panel-light);
  border-color: var(--tutor-border);
  color: var(--tutor-text);
}

/* ─── Sidebar user panel — centered avatar ─────────── */
.main-sidebar .user-panel > .image,
.main-sidebar .user-panel > .pull-left.image {
  display: block;
  float: none !important;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.main-sidebar .user-panel > .image > img,
.main-sidebar .user-panel > .image .user_image_top_menu,
.main-sidebar .user-panel > .image .img_preview_upload_files,
.main-sidebar .user-panel > .pull-left.image > img,
.main-sidebar .user-panel > .pull-left.image .user_image_top_menu,
.main-sidebar .user-panel > .pull-left.image .img_preview_upload_files {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .panel-body {
    padding: 14px;
  }

  .tutor-card {
    padding: 14px;
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 8px;
    font-size: 0.8rem;
  }
}