/* SCOM Admin Panel Styles */
.admin-bg{
  background:linear-gradient(135deg,#0a4d8c,#073961);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
}
.login-wrap{width:100%;max-width:420px;padding:20px}
.login-card{
  background:#fff;border-radius:12px;padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.login-head{text-align:center;margin-bottom:24px}
.login-head img{height:64px;width:64px;border-radius:50%;background:#f4f7fb;padding:6px;object-fit:contain}
.login-head h2{color:var(--primary);margin-top:10px;font-size:1.4rem}
.login-head p{color:var(--muted);font-size:.85rem;margin-top:4px}

/* Header */
.admin-header{
  background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;box-shadow:0 2px 10px rgba(0,0,0,.04);
  position:sticky;top:0;z-index:20;
}
.admin-header .brand{display:flex;align-items:center;gap:14px}
.admin-header img{height:42px;width:42px;border-radius:50%;background:#f4f7fb;padding:4px;object-fit:contain}
.admin-header h1{font-size:1.15rem;color:var(--primary)}
.admin-header p{font-size:.78rem;color:var(--muted)}
.admin-header nav{display:flex;gap:6px;align-items:center}
.admin-header nav a{
  text-decoration:none;color:#34465a;font-size:.88rem;font-weight:500;
  padding:8px 14px;border-radius:6px;transition:.15s;
}
.admin-header nav a:hover{background:#f0f4fa}
.admin-header nav a.active{background:var(--primary);color:#fff}
.admin-header nav a.logout{background:#fdecea;color:var(--error)}
.admin-header nav a.logout:hover{background:#f5c2bd}

/* Main */
.admin-main{max-width:1200px;margin:24px auto;padding:0 20px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat-card{
  background:#fff;border-radius:8px;padding:18px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);border-left:4px solid var(--primary);
}
.stat-num{font-size:1.8rem;font-weight:700;color:var(--primary)}
.stat-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* Toolbar */
.toolbar{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-bottom:18px;
}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters input,.filters select{
  padding:9px 12px;border:1px solid var(--border);border-radius:6px;
  font-size:.88rem;background:#fafbfd;
}
.filters input{min-width:240px}

/* Table */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:6px}
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th,.data-table td{
  padding:11px 12px;text-align:left;border-bottom:1px solid #eef1f5;
}
.data-table th{
  background:#f7f9fc;color:#34465a;font-weight:600;
  text-transform:uppercase;font-size:.75rem;letter-spacing:.3px;
}
.data-table tbody tr:hover{background:#fafbfd}
.data-table .empty{text-align:center;padding:30px;color:var(--muted)}
.actions-cell{white-space:nowrap}
.actions-cell a,.actions-cell button{
  display:inline-block;padding:5px 10px;margin-right:4px;font-size:.78rem;
  border-radius:4px;text-decoration:none;border:none;cursor:pointer;font-weight:500;
}
.actions-cell a[href*="view"]{background:#e7f0fa;color:var(--primary)}
.actions-cell a[href*="edit"]{background:#fff4e5;color:#b85d00}
.actions-cell .del{background:#fdecea;color:var(--error)}
.actions-cell .appr{background:#e7f6ec;color:#1e9e54}
.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.badge-pending{background:#fff4e5;color:#b85d00}
.badge-approved{background:#e7f6ec;color:#1e9e54}
.badge-rejected{background:#fdecea;color:#d93025}
.actions-cell a:hover,.actions-cell .del:hover{opacity:.8}

/* Pagination — windowed renderer in includes/pagination.php */
.pagination{margin-top:18px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;align-items:center}
.pagination a,
.pagination span{
  padding:7px 13px;border:1px solid var(--border);border-radius:5px;
  text-decoration:none;color:#34465a;font-size:.85rem;background:#fff;
  line-height:1;display:inline-block;
}
.pagination a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
.pagination .disabled{color:#b5bfca;background:#f7f9fc;border-color:#eef1f5;cursor:not-allowed}
.pagination .gap{border:none;background:transparent;color:#8893a3;padding:7px 4px}

/* Details grid (view page) */
.details-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px;
}
.details-grid > div{
  background:#fafbfd;padding:12px 14px;border-radius:6px;border:1px solid #eef1f5;
}
.details-grid > div.full{grid-column:1 / -1}
.details-grid label{
  display:block;font-size:.72rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;font-weight:600;
}
.details-grid span{color:var(--text);font-size:.95rem;font-weight:500}

/* Course / Module manager rows */
.course-row{
  border:1px solid #e4ecf4;border-radius:8px;padding:12px 14px;margin-bottom:12px;
  background:#fff;
}
.course-row .filters{margin:0}
.course-row .del{
  background:#fdecea;color:var(--error);border:none;padding:8px 14px;
  border-radius:6px;font-size:.82rem;font-weight:600;cursor:pointer;
}
.course-row .del:hover{background:#f5c2bd}
.module-list{
  list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed #e4ecf4;
  display:flex;flex-direction:column;gap:6px;
}
.module-list li{
  padding-left:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.module-list .filters input{min-width:0;flex:1 1 200px}
.mod-pos{
  display:inline-block;min-width:28px;text-align:center;
  background:#eef3fa;color:#34465a;border-radius:4px;
  padding:2px 6px;font-size:.72rem;font-weight:700;
}
.mod-move{
  background:#f4f7fb;border:1px solid #d6e0ec;color:#34465a;
  border-radius:4px;padding:3px 8px;font-size:.7rem;cursor:pointer;
  line-height:1;
}
.mod-move:hover:not(:disabled){background:#0a4d8c;color:#fff;border-color:#0a4d8c}
.mod-move:disabled{opacity:.35;cursor:not-allowed}

/* =========================================================================
   Upload loader overlay — admin/resources.php
   ========================================================================= */
.upl-loader{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:rgba(8,28,56,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  padding:20px;
}
body.upl-loading{overflow:hidden}
body.upl-loading .upl-loader{display:flex;animation:upl-fade .2s ease-out}

.upl-loader-card{
  background:#fff;border-radius:16px;
  width:100%;max-width:380px;
  padding:28px 26px 22px;text-align:center;
  box-shadow:0 25px 70px rgba(7,33,67,.45),0 6px 18px rgba(7,33,67,.18);
  animation:upl-pop .35s cubic-bezier(.2,.85,.3,1.2);
}
.upl-loader-card h3{
  margin:14px 0 6px;color:#0a4d8c;font-size:1.1rem;font-weight:700;
}
.upl-loader-card .upl-filename{
  margin:0;color:#34465a;font-size:.85rem;font-weight:500;
  word-break:break-all;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.upl-loader-card .upl-hint{
  margin:14px 0 0;font-size:.74rem;color:#6b7886;line-height:1.5;
}

/* Spinner — track + animated stroke arc + centered percent */
.upl-spinner{
  position:relative;width:88px;height:88px;margin:0 auto 4px;
  display:flex;align-items:center;justify-content:center;
}
.upl-spinner svg{display:block;transform:rotate(-90deg)}
.upl-spinner-arc{
  stroke-dasharray:125.66;            /* 2 * PI * r (r=20) */
  stroke-dashoffset:125.66;
  transition:stroke-dashoffset .25s ease;
}
.upl-spinner.indeterminate .upl-spinner-arc{
  stroke-dasharray:60 125;
  stroke-dashoffset:0;
  animation:upl-spin 1.1s linear infinite;
  transform-origin:center;
}
.upl-spinner.indeterminate svg{animation:upl-rotate 1.6s linear infinite}
.upl-percent{
  position:absolute;font-size:1rem;font-weight:700;color:#0a4d8c;
  letter-spacing:.3px;
}

/* Thin progress bar under the spinner */
.upl-progress{
  margin:14px 0 4px;height:6px;
  background:#e9eef6;border-radius:99px;overflow:hidden;
}
.upl-progress > span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#0a4d8c,#3b82f6,#f5a623);
  border-radius:99px;
  transition:width .25s cubic-bezier(.2,.7,.3,1);
}

@keyframes upl-fade{from{opacity:0}to{opacity:1}}
@keyframes upl-pop{
  0%   {transform:scale(.85) translateY(8px);opacity:0}
  100% {transform:scale(1) translateY(0);opacity:1}
}
@keyframes upl-rotate{to{transform:rotate(360deg)}}
@keyframes upl-spin{
  0%   {stroke-dashoffset:0}
  50%  {stroke-dashoffset:-95}
  100% {stroke-dashoffset:-185}
}

/* Course scope banner — student/resources.php */
.course-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#eaf2fb;border:1px solid #c9dcf2;color:#0a4d8c;
  border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:.9rem;
}
.course-banner .course-pill{
  background:#0a4d8c;color:#fff;border-radius:14px;
  padding:3px 12px;font-size:.78rem;font-weight:600;letter-spacing:.3px;
}

/* Toggle pill — used for student enable/disable */
.toggle-pill{
  display:inline-block;padding:4px 12px;border-radius:14px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
}
.toggle-pill.on {background:#e7f6ec;color:#1e9e54}
.toggle-pill.off{background:#fdecea;color:#d93025}

/* Password reveal box (admin view_student) */
.password-box{
  display:flex;align-items:center;gap:8px;
  background:#f7f9fc;border:1px dashed #c9d4e2;
  border-radius:6px;padding:6px 10px;font-family:monospace;font-size:.95rem;
}
.password-box button{
  background:#0a4d8c;color:#fff;border:none;padding:4px 10px;
  border-radius:4px;font-size:.72rem;cursor:pointer;font-family:inherit;
}
.password-box button:hover{opacity:.9}

@media (max-width:780px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .filters input{min-width:0;flex:1}
  .details-grid{grid-template-columns:1fr}
  .admin-header{padding:12px 16px;flex-wrap:wrap}
}