/* ============================================================
   AAMClassroom — Admin & SuperAdmin Panel CSS v2
   Extends main.css + dashboard.css
============================================================ */

/* ═══ Panel login page ══════════════════════════════════════ */
.panel-login{
  min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:24px;
  background:var(--navy);position:relative;
}
.panel-login::before{content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;z-index:0;pointer-events:none}
.panel-login::after{content:'';position:fixed;top:-20%;right:-10%;width:460px;height:460px;background:radial-gradient(circle,rgba(249,115,22,.07) 0%,transparent 60%);border-radius:50%;z-index:0;pointer-events:none}
.panel-login>*{position:relative;z-index:1}

.panel-login-wrap{width:100%;max-width:420px}

.panel-login-back{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-muted);margin-bottom:24px;transition:color var(--transition)}
.panel-login-back:hover{color:var(--text-primary)}

.panel-login-card{
  background:var(--navy-mid);border:1px solid var(--navy-border);
  border-radius:var(--radius-xl);padding:40px 36px;box-shadow:var(--shadow-lg);
}
@media(max-width:480px){.panel-login-card{padding:28px 20px}}

.panel-login-logo{font-family:var(--font-heading);font-size:1.2rem;font-weight:800;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:5px;margin-bottom:20px;color:var(--text-primary)}

.panel-login-tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:var(--radius-md);padding:4px;margin-bottom:24px}
.panel-login-tab{flex:1;text-align:center;padding:9px;border-radius:var(--radius-sm);font-size:.87rem;font-weight:600;transition:var(--transition);color:var(--text-muted)}
.panel-login-tab.active{background:rgba(245,158,11,.15);color:#fbbf24}
.panel-login-tab:hover:not(.active){color:var(--text-secondary)}

/* ═══ Sidebar colour variants ═══════════════════════════════ */
.sidebar--admin .sidebar__link.active{background:rgba(245,158,11,.12);color:#fbbf24}
.sidebar--admin .sidebar__link.active::before{background:#fbbf24}
.sidebar--admin .sidebar__avatar{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#fbbf24}
.sidebar--admin .sidebar__logo-dot{background:#fbbf24}
.sidebar--admin .sidebar__badge{background:#fbbf24;color:#1a1a1a}

.sidebar--superadmin .sidebar__link.active{background:var(--orange-glow);color:var(--orange)}
.sidebar--superadmin .sidebar__link.active::before{background:var(--orange)}
.sidebar--superadmin .sidebar__badge{background:var(--orange);color:#fff}

/* ═══ Role badge ════════════════════════════════════════════ */
.role-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.role-badge--admin     {background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.25)}
.role-badge--superadmin{background:var(--orange-glow);color:var(--orange);border:1px solid rgba(249,115,22,.25)}

/* ═══ Data table ════════════════════════════════════════════ */
.data-table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--navy-border)}
.data-table{width:100%;border-collapse:collapse;min-width:580px;background:var(--navy-mid)}
.data-table thead th{padding:12px 14px;text-align:left;font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);background:rgba(255,255,255,.02);border-bottom:1px solid var(--navy-border);white-space:nowrap}
.data-table tbody tr{border-bottom:1px solid var(--navy-border);transition:background var(--transition)}
.data-table tbody tr:last-child{border-bottom:none}
.data-table tbody tr:hover{background:rgba(255,255,255,.025)}
.data-table td{padding:13px 14px;font-size:.86rem;color:var(--text-secondary);vertical-align:middle}
.data-table td.td-primary{color:var(--text-primary);font-weight:500}
.data-table td.td-mono   {font-size:.79rem;color:var(--orange);letter-spacing:.02em}
.td-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}

/* ═══ Toolbar ═══════════════════════════════════════════════ */
.panel-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.panel-toolbar__search{flex:1;min-width:180px;max-width:300px;position:relative}
.panel-toolbar__search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-muted);pointer-events:none}
.panel-toolbar__search input{width:100%;padding:9px 12px 9px 35px;background:rgba(255,255,255,.05);border:1px solid var(--navy-border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);font-size:.86rem;outline:none;transition:var(--transition)}
.panel-toolbar__search input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.1)}
.panel-toolbar__search input::placeholder{color:var(--text-muted)}
.panel-toolbar__filter select{padding:9px 12px;background:rgba(255,255,255,.05);border:1px solid var(--navy-border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);font-size:.86rem;outline:none;appearance:none;cursor:pointer;transition:var(--transition);min-width:130px}
.panel-toolbar__filter select option{background:var(--navy-mid)}
.panel-toolbar__filter select:focus{border-color:var(--orange)}
.panel-toolbar__right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ═══ Panel page heading ════════════════════════════════════ */
.panel-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.panel-page-head h2{font-size:1.2rem;margin-bottom:4px}
.panel-page-head p {font-size:.85rem}
.panel-page-head__actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}

/* ═══ Panel stats ═══════════════════════════════════════════ */
.panel-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:1100px){.panel-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px) {.panel-stats{grid-template-columns:1fr}}

/* ═══ Modal ═════════════════════════════════════════════════ */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:900;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex}
.modal{background:var(--navy-mid);border:1px solid var(--navy-border);border-radius:var(--radius-xl);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;animation:modalIn .22s ease both;box-shadow:var(--shadow-lg)}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal--lg{max-width:680px}
.modal__header{padding:22px 26px 18px;border-bottom:1px solid var(--navy-border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal__title{font-size:1rem;font-weight:700}
.modal__close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);transition:var(--transition);line-height:0}
.modal__close:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}
.modal__body  {padding:22px 26px}
.modal__footer{padding:14px 26px 22px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--navy-border)}

/* ═══ Info rows ═════════════════════════════════════════════ */
.info-row{display:flex;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--navy-border);gap:12px}
.info-row:last-child{border-bottom:none}
.info-row__label{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);min-width:120px;flex-shrink:0}
.info-row__value{font-size:.88rem;color:var(--text-primary);word-break:break-all}

/* ═══ Panel alerts ══════════════════════════════════════════ */
.panel-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-md);font-size:.85rem;margin-bottom:14px;line-height:1.5}
.panel-alert--warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:#fbbf24}
.panel-alert--info   {background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);color:#60a5fa}
.panel-alert--danger {background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#f87171}
.panel-alert svg{flex-shrink:0;margin-top:1px}

/* ═══ Icon buttons ══════════════════════════════════════════ */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);border:1px solid var(--navy-border);background:none;color:var(--text-muted);cursor:pointer;transition:var(--transition);text-decoration:none;line-height:0}
.icon-btn:hover{background:rgba(255,255,255,.08);color:var(--text-primary);border-color:rgba(255,255,255,.2)}
.icon-btn--danger:hover {background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.3)}
.icon-btn--success:hover{background:rgba(34,197,94,.1);color:#4ade80;border-color:rgba(34,197,94,.3)}
.icon-btn--warning:hover{background:rgba(245,158,11,.1);color:#fbbf24;border-color:rgba(245,158,11,.3)}

/* ═══ Folder rows ═══════════════════════════════════════════ */
.folder-row{display:flex;align-items:center;padding:11px 14px;border-radius:var(--radius-md);gap:10px;transition:var(--transition);border:1px solid transparent}
.folder-row:hover{background:rgba(255,255,255,.04);border-color:var(--navy-border)}
.folder-row__icon{color:var(--orange);flex-shrink:0}
.folder-row__name{font-weight:600;font-size:.9rem;flex:1}
.folder-row__meta{font-size:.76rem;color:var(--text-muted);white-space:nowrap}
.folder-row__actions{display:flex;gap:5px}
.folder-row--child{padding-left:40px}
.folder-row--child .folder-row__icon{color:#60a5fa}

/* ═══ Toggle switch ═════════════════════════════════════════ */
.toggle-switch{position:relative;display:inline-block;width:42px;height:22px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.1);border-radius:22px;border:1px solid var(--navy-border);transition:.3s ease}
.toggle-slider::before{content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:var(--text-muted);border-radius:50%;transition:.3s ease}
.toggle-switch input:checked+.toggle-slider{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.4)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:#4ade80}

/* ═══ Activity list ═════════════════════════════════════════ */
.activity-list{display:flex;flex-direction:column}
.activity-item{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid var(--navy-border)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:6px}
.activity-dot--blue {background:#60a5fa}
.activity-dot--green{background:#4ade80}
.activity-dot--muted{background:var(--navy-border)}
.activity-text{font-size:.84rem;color:var(--text-secondary);line-height:1.5}
.activity-text strong{color:var(--text-primary);font-weight:600}
.activity-time{font-size:.73rem;color:var(--text-muted);margin-top:2px}

/* ═══ Progress bar ══════════════════════════════════════════ */
.progress-bar{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin-top:7px}
.progress-bar__fill{height:100%;background:var(--orange);border-radius:3px;transition:width .5s ease}
.progress-bar__fill--green{background:var(--success)}
.progress-bar__fill--blue {background:#3b82f6}

/* ═══ Two-col layout ════════════════════════════════════════ */
.dash-two-col{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media(max-width:1000px){.dash-two-col{grid-template-columns:1fr}}

@media(max-width:900px){
  .panel-toolbar{gap:8px}
  .panel-toolbar__search{max-width:100%}
  .data-table td,.data-table th{padding:10px 12px}
}