/* ═══════════════════════════════════════════════
   ARCM Student Portal — Frontend Styles v2.0
═══════════════════════════════════════════════ */
:root {
  --p-primary: #1e3a5f;
  --p-accent:  #e67e22;
  --p-green:   #27ae60;
  --p-red:     #e74c3c;
  --p-blue:    #2980b9;
  --p-bg:      #f0f4f8;
  --p-white:   #ffffff;
  --p-border:  #dce3ec;
  --p-shadow:  0 4px 16px rgba(0,0,0,.1);
  --p-radius:  10px;
}
.arcm-portal-wrap { font-family:'Segoe UI',Arial,sans-serif; max-width:960px; margin:0 auto; padding:16px; color:#2c3e50; }
.arcm-portal-header { background:linear-gradient(135deg,var(--p-primary),#2c5282); color:#fff; padding:24px 28px; border-radius:var(--p-radius); margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; }
.arcm-portal-header h2 { margin:0; font-size:22px; }
.arcm-portal-header p { margin:4px 0 0; opacity:.9; font-size:13px; }

/* Login Card */
.arcm-login-wrap .arcm-portal-header { text-align:center; display:block; }
.arcm-login-card { background:var(--p-white); border-radius:var(--p-radius); padding:32px; box-shadow:var(--p-shadow); max-width:420px; margin:0 auto; }
.arcm-login-card h3 { margin:0 0 20px; font-size:18px; text-align:center; color:var(--p-primary); }
.arcm-portal-field { margin-bottom:16px; }
.arcm-portal-field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#555; }
.arcm-portal-input { width:100%; padding:10px 14px; border:1.5px solid var(--p-border); border-radius:6px; font-size:14px; transition:border-color .2s; }
.arcm-portal-input:focus { border-color:var(--p-primary); outline:none; box-shadow:0 0 0 3px rgba(30,58,95,.1); }
.arcm-portal-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; border:none; border-radius:6px; font-weight:700; transition:all .2s; }
.arcm-portal-btn-primary { background:var(--p-primary); color:#fff; padding:12px 24px; font-size:15px; width:100%; }
.arcm-portal-btn-primary:hover { background:#162c49; }
.arcm-portal-btn-sm { background:rgba(255,255,255,.2); color:#fff; padding:8px 16px; font-size:13px; }
.arcm-portal-error { background:#fde8e8; color:#c0392b; padding:10px 14px; border-radius:6px; margin-bottom:16px; font-size:13px; font-weight:600; }
.arcm-login-hint { font-size:12px; color:#999; text-align:center; margin-top:16px; }

/* Dashboard Stats */
.arcm-portal-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.arcm-pstat-card { background:var(--p-white); border-radius:var(--p-radius); padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.arcm-pstat-card span { font-size:12px; color:#888; display:block; margin-bottom:6px; }
.arcm-pstat-card strong { font-size:22px; color:var(--p-primary); }

/* Tabs */
.arcm-portal-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:0; background:var(--p-white); padding:12px; border-radius:var(--p-radius) var(--p-radius) 0 0; box-shadow:0 2px 4px rgba(0,0,0,.05); }
.arcm-tab-btn { padding:8px 16px; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; background:#f0f4f8; color:#555; transition:all .2s; }
.arcm-tab-btn.active { background:var(--p-primary); color:#fff; }
.arcm-tab-content { display:none; background:var(--p-white); padding:20px; border-radius:0 0 var(--p-radius) var(--p-radius); box-shadow:var(--p-shadow); }
.arcm-tab-content.active { display:block; }

/* Notices */
.arcm-portal-notice { border-bottom:1px solid var(--p-border); padding:14px 0; }
.arcm-portal-notice:last-child { border-bottom:none; }
.arcm-portal-notice h4 { margin:4px 0; font-size:15px; color:var(--p-primary); }
.arcm-notice-meta { font-size:12px; color:#888; margin:0 0 8px; }
.arcm-notice-body { font-size:13px; color:#555; }
.arcm-pin-badge { background:#fff3cd; color:#856404; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }

/* Table */
.arcm-portal-table-wrap { overflow-x:auto; }
.arcm-portal-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.arcm-portal-table th { background:var(--p-primary); color:#fff; padding:9px 12px; text-align:left; white-space:nowrap; }
.arcm-portal-table td { padding:9px 12px; border-bottom:1px solid #f0f4f8; }
.arcm-portal-table tr:hover td { background:#f8fafc; }

/* Badges */
.arcm-pbadge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; }
.arcm-pbadge-green  { background:#d5f5e3; color:#1a7a45; }
.arcm-pbadge-red    { background:#fde8e8; color:#c0392b; }
.arcm-pbadge-yellow { background:#fef9e7; color:#8e6800; }
.arcm-pbadge-blue   { background:#d6eaf8; color:#1a5276; }

/* Profile */
.arcm-profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.arcm-profile-row { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #f0f4f8; font-size:13px; }
.arcm-profile-row span { color:#888; min-width:130px; }
.arcm-profile-row strong { color:#2c3e50; }

/* Attendance bar */
.arcm-portal-att-bar { margin-top:16px; }
.arcm-att-bar-bg { background:#ecf0f1; border-radius:8px; height:12px; margin-top:6px; overflow:hidden; }
.arcm-att-bar-fill { height:100%; border-radius:8px; transition:width 1s ease; }

/* Alert */
.arcm-portal-alert { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:13px; font-weight:600; }
.arcm-alert-warning { background:#fef9e7; color:#8e6800; border-left:4px solid #f39c12; }
.arcm-portal-empty { text-align:center; color:#aaa; padding:24px; font-style:italic; }

/* Responsive */
@media (max-width:600px) {
  .arcm-portal-header { flex-direction:column; gap:12px; text-align:center; }
  .arcm-profile-grid { grid-template-columns:1fr; }
  .arcm-portal-stats { grid-template-columns:1fr 1fr; }
}