/* ==========================================================
   modern.css — Qusar Peşə Liseyi üçün müasir dizayn qatı
   Yalnız görünüş: PHP məntiqinə toxunmur.
   Qoşulma: mövcud CSS fayllarından SONRA əlavə edin.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --primary: #4f46e5;
  --primary-2: #7c3aed;
  --primary-soft: #eef2ff;
  --success: #16a34a;
  --danger: #dc2626;
  --warn: #f59e0b;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow: 0 10px 30px -10px rgba(15,23,42,.18);
  --grad: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020; --surface: #131a2e; --surface-2: #19223b;
    --text: #e8ecf8; --muted: #94a3b8; --border: #26304d;
    --primary-soft: #1e2547;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 10px 30px -10px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; transition: color .2s, background .2s, transform .2s, box-shadow .2s; }
h1, h2, h3, h4 { letter-spacing: -.02em; color: var(--text); }
::selection { background: var(--primary); color: #fff; }

/* ---------- Düymələr ---------- */
.btn, .save-btn, .add-btn, .cancel-btn, .reset-btn, .btn-submit, .tests-link, .btn-primary, .btn-photo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: 0; border-radius: 999px;
  font: 600 14px/1.2 'Inter', sans-serif; cursor: pointer;
  background: var(--grad) !important; color: #fff !important;
  box-shadow: 0 6px 16px -6px rgba(79,70,229,.6);
}
.btn:hover, .save-btn:hover, .add-btn:hover, .btn-submit:hover, .tests-link:hover, .btn-primary:hover, .btn-photo:hover {
  transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(79,70,229,.65);
}
.cancel-btn, .btn-secondary { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border); box-shadow: none; }
.reset-btn, .btn-danger, .btn-delete { background: var(--danger) !important; color: #fff !important; box-shadow: none; }
.btn-small, .btn-edit, .btn-view, .btn-photos {
  display: inline-flex; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--primary-soft); color: var(--primary); border: 0; cursor: pointer;
}
.btn-small.btn-delete, .btn-small.btn-delete:hover { background: rgba(220,38,38,.12) !important; color: var(--danger) !important; }
.logout-btn { background: rgba(220,38,38,.1) !important; color: var(--danger) !important; padding: 8px 16px; border-radius: 999px; font-weight: 600; box-shadow: none; }

/* ---------- Ana səhifə: header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
  color: var(--text) !important;
}
.header-content { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 14px; }
.logo-placeholder { width: 48px; height: 48px; border-radius: 14px; background: var(--grad); display: grid; place-items: center; font-size: 26px; box-shadow: 0 8px 18px -6px rgba(79,70,229,.6); }
.institution-name h1 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text) !important; }
.institution-name p { margin: 0; font-size: 12.5px; color: var(--muted) !important; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.main-nav a { display: inline-block; padding: 8px 14px; border-radius: 999px; color: var(--text) !important; font-size: 14px; font-weight: 500; }
.main-nav a:hover { background: var(--primary-soft); color: var(--primary) !important; }
.teacher-panel-btn, .admin-panel-btn { background: var(--primary-soft) !important; color: var(--primary) !important; font-weight: 600 !important; }
.tests-nav-link, .teacher-tests-link { background: var(--grad) !important; color: #fff !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center; color: #fff !important;
  padding: 110px 24px 120px; background: var(--grad) !important;
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; }
.hero::before { width: 380px; height: 380px; background: #22d3ee; top: -120px; left: -80px; }
.hero::after { width: 420px; height: 420px; background: #f472b6; bottom: -160px; right: -100px; }
.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.hero h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 800; line-height: 1.1; margin: 0 0 18px; color: #fff !important; }
.hero p { font-size: clamp(16px, 2vw, 19px); opacity: .92; margin: 0 0 32px; color: #fff !important; }
.hero .btn { background: #fff !important; color: var(--primary) !important; padding: 14px 30px; font-size: 15px; }

/* ---------- Məzmun kartları ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px 60px; }
.announcements {
  position: relative; margin: -48px auto 40px; max-width: 920px; z-index: 2;
  background: var(--surface) !important; border: 1px solid var(--border);
  border-left: 5px solid var(--warn); border-radius: var(--radius); padding: 22px 28px; box-shadow: var(--shadow);
}
.announcements h3 { margin: 0 0 6px; font-size: 17px; }
.announcements p { margin: 0; color: var(--muted); }
.sections-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.section-card {
  background: var(--surface) !important; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.section-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--primary); }
.section-card h3 { margin: 0; font-size: 19px; }
.section-card p { margin: 0 0 12px; color: var(--muted); flex: 1; font-size: 14.5px; }
.section-card .btn { align-self: flex-start; }

/* ---------- Footer ---------- */
.footer { background: #0b1020 !important; color: #cbd5e1 !important; text-align: center; padding: 36px 24px; font-size: 14px; }
.footer p { margin: 4px 0; color: inherit !important; }

/* ---------- Yan panellər (yalnız rəng) ---------- */
.left-sidebar, .right-sidebar { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow); }
.left-sidebar-list a, .right-sidebar-list a { color: var(--text) !important; border-radius: 12px; }
.left-sidebar-list a:hover, .right-sidebar-list a:hover { background: var(--primary-soft) !important; color: var(--primary) !important; }
.left-sidebar-toggle, .right-sidebar-toggle { background: var(--grad) !important; border-radius: 50% !important; box-shadow: var(--shadow); }

/* ---------- Daxili səhifələr ---------- */
.page-header { background: var(--surface) !important; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.page-header-content { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; }
.back-home, .back-link { font-weight: 600; }
.page-title { font-weight: 800; }
.page-container { max-width: 1000px; margin: 32px auto; padding: 0 20px; }
.content-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin-bottom: 20px; }
.page-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); }
.page-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.photos-title { margin: 40px 0 18px; }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.photo-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.photo-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.photo-image { width: 100%; height: 190px; object-fit: cover; display: block; cursor: zoom-in; }
.photo-info { padding: 14px 16px; }
.photo-title { font-weight: 700; }
.photo-description, .photo-meta { color: var(--muted); font-size: 13px; }
.photo-meta { display: flex; gap: 12px; margin-top: 8px; }
.photo-modal { backdrop-filter: blur(6px); }
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

/* Admin paneli çubuğu (səhifə üstü) */
.admin-panel { background: #0f172a !important; color: #fff; }
.admin-panel-content { max-width: 1100px; margin: 0 auto; padding: 8px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.admin-panel-content a { color: #c7d2fe; margin-left: 12px; font-weight: 500; }
.admin-panel-content a:hover { color: #fff; }

/* ---------- Admin və müəllim kabineti ---------- */
.admin-container, .teacher-container { max-width: 1200px; margin: 28px auto; padding: 0 20px 40px; }
.admin-header, .teacher-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--grad); color: #fff; border-radius: var(--radius); padding: 26px 30px; box-shadow: var(--shadow); margin-bottom: 24px;
}
.admin-header h1, .teacher-header h1, .admin-header p, .teacher-header p { color: #fff !important; margin: 0; }
.admin-header p, .teacher-header p { opacity: .85; font-size: 14px; margin-top: 4px; }
.message, .error { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-weight: 500; border: 1px solid; }
.message { background: rgba(22,163,74,.1); color: var(--success); border-color: rgba(22,163,74,.3); }
.error { background: rgba(220,38,38,.08); color: var(--danger); border-color: rgba(220,38,38,.3); }
.message.error { background: rgba(220,38,38,.08); color: var(--danger); border-color: rgba(220,38,38,.3); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.tab { padding: 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--muted); transition: all .2s; }
.tab:hover { color: var(--primary); background: var(--primary-soft); }
.tab.active { background: var(--grad); color: #fff; box-shadow: 0 6px 14px -6px rgba(79,70,229,.7); }
.tab-content { display: none; animation: fadeUp .35s ease; }
.tab-content.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.admin-section, .table-container, .schedule-container, .add-form, .dashboard-card, .tests-section, .tests-preview {
  background: var(--surface) !important; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.dashboard-card { margin: 0; }
.dashboard-card h3, .admin-section h2 { margin-top: 0; }
.tests-preview { border: 0; padding: 0; box-shadow: none; margin-top: 10px; }
.info-item { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.info-item:last-child { border-bottom: 0; }
.info-label { color: var(--muted); font-size: 13px; }
.info-value { font-weight: 600; }
.stat-value { font-size: 48px; font-weight: 800; text-align: center; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.test-stats, .tests-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.test-stat, .test-stat-card { background: var(--surface-2) !important; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: center; }
.test-stat-value { font-size: 26px; font-weight: 800; color: var(--primary) !important; }
.test-stat-label { color: var(--muted) !important; font-size: 12.5px; }

/* Cədvəl */
.schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.schedule-day { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.schedule-day h4 { margin: 0 0 10px; color: var(--primary); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.schedule-lesson { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.lesson-time { font-size: 12px; font-weight: 700; color: var(--primary); }
.lesson-subject { font-weight: 700; }
.lesson-info { font-size: 12.5px; color: var(--muted); }
.lesson-actions { margin-top: 8px; }

/* Cədvəllər */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table-container { overflow-x: auto; }
.data-table th { text-align: left; padding: 12px 14px; background: var(--surface-2); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.data-table td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: var(--primary-soft); }
.file-link { font-weight: 600; }
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; }
.status-public { background: rgba(22,163,74,.12); color: var(--success); }
.status-private { background: rgba(100,116,139,.15); color: var(--muted); }

/* Səhifələr siyahısı */
.page-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--surface-2); transition: border-color .2s, transform .2s; }
.page-item:hover { border-color: var(--primary); transform: translateX(3px); }
.page-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Formalar */
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1 1 220px; }
.form-group { margin-bottom: 16px; }
.form-group label, label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 11px 14px; font: 500 14px 'Inter', sans-serif;
  background: var(--surface) !important; color: var(--text) !important;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79,70,229,.15); }
input[type=checkbox] { width: auto; display: inline-block; margin-right: 8px; accent-color: var(--primary); }
input[type=file] { padding: 10px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); width: 100%; background: var(--surface-2); }
textarea { resize: vertical; }
.form-actions, .button-group { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.order-input { width: 80px !important; }
.photos-list .photo-item { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.photo-preview { width: 90px; height: 70px; object-fit: cover; border-radius: 8px; }
.empty-state { text-align: center; padding: 40px; color: var(--muted); font-size: 15px; }
.empty-state div { font-size: 44px; }

/* Təhlükəsizlik jurnalı */
.security-log { background: #0b1020; color: #a5b4fc; font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace; border-radius: var(--radius-sm); padding: 14px; overflow-x: auto; }
.log-entry { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); white-space: pre-wrap; word-break: break-all; }

/* ---------- Giriş pəncərələri ---------- */
.modal-overlay { display: flex !important; position: fixed; inset: 0; align-items: center; justify-content: center; padding: 20px; background: var(--grad) !important; overflow-y: auto; }
.modal-container { width: 100%; max-width: 440px; background: var(--surface) !important; color: var(--text); border-radius: 24px; padding: 38px 34px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); animation: fadeUp .45s ease; }
.modal-header { text-align: center; margin-bottom: 26px; }
.modal-header h3 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.modal-header p { margin: 0; color: var(--muted); font-size: 14px; }
.modal-container .btn-submit { width: 100%; padding: 14px; font-size: 15px; margin-top: 4px; }
.modal-container .arrow { transition: transform .2s; }
.modal-container .btn-submit:hover .arrow { transform: translateX(4px); }
.form-footer { text-align: center; margin-top: 16px; font-size: 14px; }
.error-message { margin-top: 14px; padding: 12px 14px; text-align: center; background: rgba(220,38,38,.08); color: var(--danger); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; }
.security-note { margin-top: 20px; text-align: center; font-size: 12px; color: var(--muted); }
.teacher-features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.teacher-features .feature { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; font-weight: 500; }

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .header-content { padding: 10px 14px; }
  .main-nav ul { gap: 2px; }
  .main-nav a { padding: 6px 10px; font-size: 13px; }
  .hero { padding: 70px 18px 90px; }
  .announcements { margin-top: -36px; }
  .page-content { padding: 20px; }
  .admin-header, .teacher-header { padding: 20px; }
  .teacher-features { grid-template-columns: 1fr; }
  .modal-container { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }