/*
 * College Grievance Management System — style.css
 * Red & White Enterprise Theme · v1.0.0
 */

/* ─── Variables ─────────────────────────────────────────── */
:root {
  --red:        #C62828;
  --red-dark:   #8e0000;
  --red-light:  #ef5350;
  --accent:     #E53935;
  --bg:         #F8F9FA;
  --sidebar-w:  255px;
  --nav-h:      56px;
  --radius:     12px;
  --shadow:     0 2px 12px rgba(0,0,0,.08);
  --shadow-h:   0 8px 28px rgba(198,40,40,.15);
  --transition: .22s ease;
}

/* ─── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: #212529;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: color var(--transition); }
a:hover { color: var(--red); }

::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: #f0f0f0; }
::-webkit-scrollbar-thumb  { background: var(--red-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ─── Navbar ─────────────────────────────────────────────── */
.navbar {
  height: var(--nav-h);
  padding: 0 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  /* gradient applied inline so it works without !important */
}
.navbar-brand { font-weight: 700; letter-spacing: .4px; }
.navbar .form-control {
  border-radius: 20px;
  font-size: 13px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}
.navbar .form-control::placeholder { color: rgba(255,255,255,.7); }
.navbar .form-control:focus {
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}

/* ─── Sidebar ────────────────────────────────────────────── */
#sidebar-wrapper {
  width: var(--sidebar-w);
  min-height: calc(100vh - var(--nav-h));
  position: fixed;
  top: var(--nav-h);
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: left var(--transition), transform var(--transition);
  z-index: 1040;
  background: #fff;
  border-right: 1px solid #e9ecef;
  box-shadow: 2px 0 8px rgba(0,0,0,.05);
}
#sidebar-wrapper::-webkit-scrollbar       { width: 3px; }
#sidebar-wrapper::-webkit-scrollbar-thumb { background: #ddd; }

.sidebar-heading {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  padding: 18px 14px;
}

.sidebar-category {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #9e9e9e;
  padding: 10px 16px 3px;
  border-top: 1px solid #f5f5f5;
  margin-top: 6px;
}

/* Sidebar links (Bootstrap list-group items) */
.list-group-item-action {
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  font-size: 13px;
  padding: 8px 16px !important;
  color: #444;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
}
.list-group-item-action:hover {
  background: rgba(198,40,40,.06) !important;
  border-left-color: var(--red) !important;
  color: var(--red) !important;
  padding-left: 20px !important;
}
.list-group-item-action.active {
  background: rgba(198,40,40,.1) !important;
  border-left-color: var(--red) !important;
  color: var(--red) !important;
  font-weight: 600;
}
.list-group-item-action .fas { width: 16px; text-align: center; }

/* ─── Page Content ───────────────────────────────────────── */
#wrapper { display: flex; }

#page-content-wrapper {
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--nav-h));
  padding-top: var(--nav-h);
  width: calc(100% - var(--sidebar-w));
  transition: margin-left var(--transition), width var(--transition);
}

/* Collapsed sidebar */
#wrapper.sidebar-hidden #sidebar-wrapper     { left: calc(-1 * var(--sidebar-w)); }
#wrapper.sidebar-hidden #page-content-wrapper { margin-left: 0; width: 100%; }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-h); transform: translateY(-1px); }

.card-header {
  background: linear-gradient(135deg, var(--red), var(--accent));
  color: #fff;
  border: none;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
}
/* White card-header override */
.card-header.bg-white,
.card-header[style*="background: white"],
.card-header[style*="background:#fff"] {
  background: #fff !important;
  color: #212529 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* Glassmorphism */
.glass-card {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 4px 20px rgba(198,40,40,.08) !important;
}

/* ─── Stat Cards ─────────────────────────────────────────── */
.stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.stat-card::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.12);
}
.stat-card::after {
  content:''; position:absolute; bottom:-40px; left:10px;
  width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.stat-card .stat-icon {
  width:52px; height:52px; border-radius:10px;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; position:relative; z-index:1;
}
.stat-card .stat-value {
  font-size:30px; font-weight:800; color:#fff;
  line-height:1.1; position:relative; z-index:1;
}
.stat-card .stat-label  { font-size:12px; color:rgba(255,255,255,.9); font-weight:500; position:relative; z-index:1; }
.stat-card .stat-change { font-size:12px; color:rgba(255,255,255,.85); position:relative; z-index:1; }

.bg-primary { background: linear-gradient(135deg, var(--red), var(--accent)) !important; }

/* ─── Page Header ────────────────────────────────────────── */
.page-header {
  background: linear-gradient(135deg, var(--red), var(--accent));
  color:#fff;
  padding:18px 22px;
  border-radius: var(--radius);
  margin-bottom:22px;
  box-shadow:0 4px 18px rgba(198,40,40,.3);
}
.page-header h4   { font-weight:700; margin:0; font-size:18px; }
.page-header p    { margin:3px 0 0; opacity:.88; font-size:13px; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn { border-radius:8px; font-weight:500; transition:all var(--transition); }
.btn:focus { box-shadow:0 0 0 3px rgba(198,40,40,.25); }
.btn-primary, .btn-danger {
  background: var(--red); border-color: var(--red);
}
.btn-primary:hover, .btn-danger:hover {
  background: var(--red-dark); border-color: var(--red-dark);
  box-shadow:0 4px 12px rgba(198,40,40,.4);
}
.btn-outline-primary, .btn-outline-danger { color:var(--red); border-color:var(--red); }
.btn-outline-primary:hover, .btn-outline-danger:hover { background:var(--red); color:#fff; }
.btn-xs { padding:2px 8px; font-size:11px; }

/* ─── Forms ──────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius:8px; border:1.5px solid #dee2e6;
  padding:8px 12px; font-size:13px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(198,40,40,.12);
}
.form-label {
  font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:#495057; margin-bottom:5px;
}
.input-group-text {
  background:#f8f9fa; border-color:#dee2e6;
  border-radius:8px 0 0 8px; font-size:13px;
}

/* ─── Tables ─────────────────────────────────────────────── */
.table { font-size:13px; }
.table thead th {
  background:#f8f9fa; color:#495057;
  font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:2px solid #dee2e6;
  padding:10px 12px; white-space:nowrap;
}
.table tbody td   { padding:9px 12px; vertical-align:middle; }
.table tbody tr   { transition:background var(--transition); }
.table tbody tr:hover { background:rgba(198,40,40,.03) !important; }

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input  { border-radius:20px; }
.dataTables_wrapper .dataTables_length select { border-radius:6px; }
.dataTables_wrapper .paginate_button.current  {
  background:var(--red) !important; border-color:var(--red) !important; color:#fff !important;
}

/* ─── Badges ─────────────────────────────────────────────── */
.badge { font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; }

/* ─── Timeline ───────────────────────────────────────────── */
.timeline { position:relative; padding-left:34px; }
.timeline::before {
  content:''; position:absolute; left:11px; top:8px; bottom:0;
  width:2px; background:linear-gradient(to bottom, var(--red), #e9ecef);
}
.timeline-item { position:relative; margin-bottom:20px; }
.timeline-dot {
  position:absolute; left:-28px; top:6px;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#fff; z-index:1;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:transform var(--transition);
}
.timeline-item:hover .timeline-dot { transform:scale(1.15); }
.timeline-content {
  background:#fff; border-radius:10px; padding:12px 16px;
  box-shadow:var(--shadow); border-left:3px solid var(--red);
  transition:box-shadow var(--transition);
}
.timeline-content:hover { box-shadow:var(--shadow-h); }
.timeline-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:6px; flex-wrap:wrap; gap:6px;
}
.timeline-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.timeline-meta span { font-size:11px; color:#6c757d; display:flex; align-items:center; gap:4px; }

/* ─── File upload zone ───────────────────────────────────── */
.file-upload-zone {
  border:2px dashed #dee2e6; border-radius:var(--radius);
  padding:24px; text-align:center; cursor:pointer;
  transition:all var(--transition); background:#fafafa;
}
.file-upload-zone:hover, .file-upload-zone.dragover {
  border-color:var(--red); background:rgba(198,40,40,.03);
}

/* ─── Charts ─────────────────────────────────────────────── */
.chart-container { position:relative; height:250px; }

/* ─── SLA countdown ──────────────────────────────────────── */
.sla-countdown { font-size:20px; font-weight:700; }

/* ─── Status steps ───────────────────────────────────────── */
.status-steps  { display:flex; flex-wrap:wrap; gap:6px; }
.status-step   { display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.status-step.completed { background:#e8f5e9; color:#2e7d32; }
.status-step.current   { background:var(--red); color:#fff; box-shadow:0 2px 8px rgba(198,40,40,.3); }
.status-step.pending   { background:#f5f5f5; color:#9e9e9e; }

/* ─── Rating stars ───────────────────────────────────────── */
.rating-stars { display:flex; gap:4px; }
.rating-stars .star { font-size:24px; cursor:pointer; color:#ddd; transition:color .15s; line-height:1; }
.rating-stars .star.active, .rating-stars .star:hover { color:#ffc107; }

/* ─── Notifications dropdown ─────────────────────────────── */
#notifDropdown .dropdown-item { white-space:normal; border-bottom:1px solid #f5f5f5; font-size:13px; }
#notifDropdown .dropdown-item:hover { background:#fff5f5; }

/* ─── Skeleton loader ────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size:200% 100%;
  animation:skel 1.5s infinite;
  border-radius:4px; color:transparent !important;
}
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── Animations ─────────────────────────────────────────── */
.fade-in { animation:fadeIn .4s ease forwards; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ─── Login page ─────────────────────────────────────────── */
.login-bg {
  background:linear-gradient(135deg, var(--red-dark), var(--red), var(--accent));
  min-height:100vh; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card {
  width:420px; max-width:100%;
  border-radius:16px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-header {
  background:linear-gradient(135deg, var(--red-dark), var(--red));
  color:#fff; padding:28px 24px 20px; text-align:center;
}
.login-body   { background:#fff; padding:28px 26px; }
.login-footer { background:#f8f9fa; padding:12px 20px; text-align:center; font-size:12px; color:#6c757d; }

/* ─── Modal ──────────────────────────────────────────────── */
.modal-content  { border:none; border-radius:var(--radius); }
.modal-header   { padding:12px 18px; }
.modal-header.bg-danger { background:linear-gradient(135deg, var(--red), var(--accent)) !important; }
.btn-close-white { filter:invert(1) grayscale(1) brightness(2); }

/* ─── Dark mode ──────────────────────────────────────────── */
[data-bs-theme="dark"] body                      { background:#111; color:#ddd; }
[data-bs-theme="dark"] #sidebar-wrapper          { background:#1a1a1a; border-color:#333; }
[data-bs-theme="dark"] .card                     { background:#1e1e1e; }
[data-bs-theme="dark"] .card-header.bg-white     { background:#252525 !important; color:#e0e0e0 !important; }
[data-bs-theme="dark"] .table                    { color:#ddd; }
[data-bs-theme="dark"] .table thead th           { background:#2a2a2a; border-color:#444; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select              { background:#2a2a2a; border-color:#444; color:#ddd; }
[data-bs-theme="dark"] .list-group-item-action   { color:#ccc; background:#1a1a1a; }
[data-bs-theme="dark"] .list-group-item-action:hover { background:rgba(198,40,40,.12) !important; }
[data-bs-theme="dark"] .bg-light                 { background:#2a2a2a !important; }
[data-bs-theme="dark"] .text-muted               { color:#aaa !important; }
[data-bs-theme="dark"] .dropdown-menu            { background:#1e1e1e; border-color:#333; }
[data-bs-theme="dark"] .dropdown-item            { color:#ccc; }
[data-bs-theme="dark"] .dropdown-item:hover      { background:#2a2a2a; color:#fff; }
[data-bs-theme="dark"] .timeline-content         { background:#252525; }
[data-bs-theme="dark"] .glass-card               { background:rgba(30,30,30,.92); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width:991px) {
  #sidebar-wrapper       { left:calc(-1 * var(--sidebar-w)); }
  #page-content-wrapper  { margin-left:0; width:100%; }
  #wrapper.sidebar-open #sidebar-wrapper { left:0; box-shadow:4px 0 20px rgba(0,0,0,.2); }
}
@media (max-width:767px) {
  .stat-card .stat-value { font-size:24px; }
  .page-header           { padding:14px 16px; }
  .page-header h4        { font-size:16px; }
  .chart-container       { height:200px; }
  .timeline              { padding-left:26px; }
  .timeline::before      { left:8px; }
  .timeline-dot          { left:-22px; width:20px; height:20px; font-size:9px; }
}

/* ─── Print ──────────────────────────────────────────────── */
@media print {
  #sidebar-wrapper, .navbar, .btn, .no-print, nav { display:none !important; }
  #page-content-wrapper { margin-left:0 !important; width:100% !important; padding-top:0 !important; }
  .card { box-shadow:none !important; border:1px solid #dee2e6 !important; }
}

/* ─── Utilities ──────────────────────────────────────────── */
.text-primary   { color:var(--red) !important; }
.border-primary { border-color:var(--red) !important; }
.rounded-xl     { border-radius:var(--radius) !important; }
.fw-600         { font-weight:600; }
.cursor-pointer { cursor:pointer; }