:root{--bg:#f0f4ff;--surface:#fff;--border:#dde6ff;--accent:#2563eb;--accent-h:#1d4ed8;--muted:#64748b;--text:#0f172a;--danger:#ef4444;--warn:#f59e0b;--success:#10b981;--radius:14px;--shadow:0 4px 24px rgba(37,99,235,.07);color-scheme:light}
[data-theme=dark]{--bg:#0f172a;--surface:#000;--border:#334155;--muted:#94a3b8;--text:#e2e8f0;--shadow:0 4px 24px rgba(0,0,0,.4);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;height:100dvh;overflow:hidden}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column}
#app-view{flex:1;min-height:0;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;position:relative}
.spa-view{display:none;flex-direction:column;flex:1;min-height:0;height:100%;width:100%;overflow:hidden}
.spa-view.active{display:flex}
body.page-scrollable{overflow-y:auto!important;height:auto!important;min-height:100vh}
body.page-scrollable #app-view,body.page-scrollable #view-moodle{overflow:visible!important;height:auto!important;flex:none!important}
[data-theme=dark]::-webkit-scrollbar{width:6px;height:6px}
[data-theme=dark]::-webkit-scrollbar-track{background:var(--bg)}
[data-theme=dark]::-webkit-scrollbar-thumb{background:#334155;border-radius:99px}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:stretch;justify-content:space-around;padding:6px 0 max(6px,env(safe-area-inset-bottom));z-index:200;box-shadow:0 -4px 20px rgba(0,0,0,.05)}
[data-theme=dark] .bottom-nav{box-shadow:0 -4px 20px rgba(0,0,0,.3)}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:color .15s}
.nav-tab:hover{color:var(--text)}.nav-tab.active{color:var(--accent)}

/* ── Standalone PWA safe-area fixes (iOS only — status bar + bottom nav + content) ── */
@supports (-webkit-touch-callout: none) {
  /* Status bar: push body content below the notch */
  body.pwa-standalone{padding-top:env(safe-area-inset-top, 0px)}

  /* Drawer menu: don't extend behind status bar */
  body.pwa-standalone .drawer-content{padding-top:env(safe-area-inset-top, 0px)}

  /* Bottom nav: flat padding, no extra safe-area gutter */
  body.pwa-standalone .bottom-nav{padding:6px 0}
  body.pwa-standalone .nav-tab{padding:5px 4px}

  /* Content areas: remove safe-area-inset-bottom (match Android where it's 0) */
  body.pwa-standalone .hub-container{margin-bottom:58px}
  body.pwa-standalone #view-moodle .page{margin:0 auto 64px}
  body.pwa-standalone #view-attendance .page{padding-bottom:calc(58px + 16px)}
  body.pwa-standalone #view-results .page-wrap{padding-bottom:calc(58px + 16px)}
  body.pwa-standalone .center-state{padding-bottom:calc(58px + 20px)}
  body.pwa-standalone #auth-overlay{bottom:58px}
}
/* Moodle scrollable mode override */
@supports (-webkit-touch-callout: none) {
  body.pwa-standalone.page-scrollable #view-moodle .page{padding-bottom:calc(58px + 16px);margin-bottom:0}
}


.modal-overlay{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s;background:rgba(15,23,42,.5);backdrop-filter:blur(0)}
.modal-overlay.active{opacity:1;pointer-events:auto;backdrop-filter:blur(12px)}
.modal-card{background:var(--surface);border-radius:20px;padding:20px;width:min(520px,100%);box-shadow:0 20px 40px rgba(0,0,0,.15);transform:scale(.95);transition:transform .2s;border:1px solid var(--border);max-height:85vh;overflow-y:auto}
.modal-overlay.active .modal-card{transform:scale(1)}
.modal-title{font-size:1rem;font-weight:800;margin-bottom:14px;letter-spacing:-.3px;text-align:center}
.s-input{width:100%;height:42px;padding:0 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;outline:none;transition:border-color .15s}
.s-input:focus{border-color:var(--accent)}
.s-input::placeholder{color:var(--muted);font-weight:400}
.modal-actions{display:flex;gap:8px;margin-top:14px}
.modal-btn{flex:1;padding:10px;border-radius:10px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;border:none;transition:all .15s}
.modal-btn-cancel{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.modal-btn-cancel:hover{border-color:var(--muted)}
.modal-btn-save{background:var(--accent);color:#fff}.modal-btn-save:hover{opacity:.9}

.drawer-pull-tab {
  position: fixed; left: -4px; top: 120px; z-index: 999;
  width: 32px; height: 54px;
  background: rgba(255, 255, 255, 0.85); color: var(--text);
  border: 1px solid rgba(0,0,0,0.06); border-radius: 0 16px 16px 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0; padding-left: 4px; outline: none;
}
.drawer-pull-tab:hover { 
  width: 40px; background: #fff; color: var(--accent);
  box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.08);
}
.drawer-pull-tab:active { transform: scale(0.92) translateX(-4px); }
[data-theme=dark] .drawer-pull-tab { background: rgba(0, 0, 0, 0.85); box-shadow: 4px 4px 20px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); }
[data-theme=dark] .drawer-pull-tab:hover { background: #000; box-shadow: 6px 6px 24px rgba(0,0,0,0.5); }
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.2); 
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  z-index: 9998; opacity: 0; pointer-events: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-overlay.active {
  opacity: 1; pointer-events: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
[data-theme=dark] .drawer-overlay { background: rgba(0, 0, 0, 0.4); }
.drawer-content {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 290px; background: rgba(255, 255, 255, 0.85);
  border-right: 1px solid rgba(0,0,0,0.06); border-radius: 0 24px 24px 0;
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 20px 0 40px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.drawer-overlay.active .drawer-content { transform: translateX(0); }
[data-theme=dark] .drawer-content { background: rgba(0, 0, 0, 0.85); box-shadow: 20px 0 40px rgba(0,0,0,0.5); border-right: 1px solid rgba(255,255,255,0.15); }
.drawer-header {
  padding: 24px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.drawer-title { font-size: 1.25rem; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
/* Consolidated Square Icon / Close Buttons */
.drawer-close-btn,
.sug-toast-close,
.nm-icon-btn,
.att-modal-close,
.doc-header .lightbox-close,
.doc-close-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.drawer-close-btn:hover,
.sug-toast-close:hover,
.nm-icon-btn:hover,
.att-modal-close:hover,
.doc-header .lightbox-close:hover,
.doc-close-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--muted);
}
.drawer-close-btn:active,
.sug-toast-close:active,
.nm-icon-btn:active,
.att-modal-close:active,
.doc-header .lightbox-close:active,
.doc-close-btn:active {
  transform: scale(0.92);
}
[data-theme=dark] .drawer-close-btn,
[data-theme=dark] .sug-toast-close,
[data-theme=dark] .nm-icon-btn,
[data-theme=dark] .att-modal-close,
[data-theme=dark] .doc-header .lightbox-close,
[data-theme=dark] .doc-close-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}
[data-theme=dark] .drawer-close-btn:hover,
[data-theme=dark] .sug-toast-close:hover,
[data-theme=dark] .nm-icon-btn:hover,
[data-theme=dark] .att-modal-close:hover,
[data-theme=dark] .doc-header .lightbox-close:hover,
[data-theme=dark] .doc-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #64748b;
  color: #fff;
}
.sug-toast-close { width: 28px; height: 28px; border-radius: 10px; }
.att-modal-close { width: 34px; height: 34px; }
.doc-header .lightbox-close, .doc-close-btn { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
.drawer-menu-list { padding: 10px 16px 24px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; }
.drawer-menu-list::-webkit-scrollbar { width: 4px; }
.drawer-menu-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
[data-theme=dark] .drawer-menu-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
.drawer-menu-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  color: var(--muted); text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 600;
  transition: all 0.2s ease; background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; outline: none;
}
.drawer-menu-item:hover { background: rgba(37, 99, 235, 0.08); color: var(--accent); transform: translateX(4px); }
[data-theme=dark] .drawer-menu-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.drawer-menu-item.danger { color: var(--danger); margin-top: auto; }
.drawer-menu-item.danger:hover { background: rgba(239, 68, 68, 0.08); color: var(--danger); transform: translateX(4px); }
.drawer-menu-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: currentColor; }
.drawer-menu-icon svg { display: block; transition: transform 0.2s ease; }
.drawer-menu-item:hover .drawer-menu-icon svg { transform: scale(1.1); }
.drawer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent); margin: 12px 0; flex-shrink: 0; border: none; }
[data-theme=dark] .drawer-divider { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); }
.drawer-footer {
  padding: 16px 20px 20px 20px; border-top: 1px solid rgba(0,0,0,0.06); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.4);
}
[data-theme=dark] .drawer-footer { background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.15); }
.drawer-footer-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted); cursor: pointer; transition: all 0.2s ease; padding: 10px; border-radius: 14px;
}
.drawer-footer-item:hover { color: var(--accent); background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.05); transform: translateY(-2px); }
[data-theme=dark] .drawer-footer-item:hover { background: #1e293b; box-shadow: 0 4px 14px rgba(0,0,0,0.3); color: #fff; }
.drawer-footer-icon { display: flex; align-items: center; }
.drawer-footer-icon svg { transition: transform 0.2s ease; }
.drawer-footer-item:hover .drawer-footer-icon svg { transform: scale(1.15) rotate(5deg); }
.drawer-footer-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
.drawer-footer-divider { width: 1px; height: 32px; background: rgba(0,0,0,0.06); flex-shrink: 0; margin: 0 10px; }
[data-theme=dark] .drawer-footer-divider { background: rgba(255,255,255,0.15); }
.drawer-section-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; padding-left: 8px; }

#pwa-modal{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .25s,backdrop-filter .25s;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);background:rgba(15,23,42,0)}
#pwa-modal.active{opacity:1;pointer-events:auto;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);background:rgba(15,23,42,.5)}
.pwa-card{background:var(--surface);border-radius:22px;padding:32px 26px 26px;width:min(320px,100%);position:relative;z-index:1;box-shadow:0 32px 80px rgba(15,23,42,.3);transform:translateY(14px) scale(.97);transition:transform .3s cubic-bezier(.34,1.3,.64,1);text-align:center}
#pwa-modal.active .pwa-card{transform:translateY(0) scale(1)}
[data-theme=dark] .pwa-card{background:#1e293b}
.pwa-app-icon{width:72px;height:72px;border-radius:18px;margin:0 auto 16px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pwa-app-icon svg{width:72px;height:72px}
.pwa-title{font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:6px}
.pwa-sub{font-size:.8rem;color:var(--muted);line-height:1.5;margin-bottom:22px}
.pwa-install-btn{display:block;width:100%;height:48px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;transition:background .15s;margin-bottom:10px}
.pwa-install-btn:hover{background:var(--accent-h)}
.pwa-later-btn{display:block;width:100%;height:40px;background:none;border:none;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;border-radius:10px;transition:color .15s}
.pwa-later-btn:hover{color:var(--text)}

.sug-toast { position: fixed; top: -80px; left: 50%; transform: translateX(-50%); z-index: 10000; background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); cursor: pointer; transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); width: min(360px, calc(100% - 32px)); }
.sug-toast.show { top: 16px; }
[data-theme=dark] .sug-toast { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.sug-toast-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(37,99,235,0.1); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
[data-theme=dark] .sug-toast-icon { background: rgba(37,99,235,0.2); }
.sug-toast-text { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.app-notice-toast {
  top: -220px;
  align-items: flex-start;
  padding: 15px 18px;
  width: min(450px, calc(100% - 32px));
  cursor: default;
  z-index: 100005;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: top 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.app-notice-toast.show {
  top: 16px;
}
.app-notice-icon {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
  margin-top: 1px;
}
[data-theme=dark] .app-notice-icon {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #fbbf24 !important;
}
.app-notice-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-notice-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.app-notice-msg {
  font-size: 0.82rem;
  font-weight: 450;
  color: var(--muted);
  line-height: 1.45;
  word-break: break-word;
}
.sug-tab-bar { display: flex; border-bottom: 1.5px solid var(--border); background: var(--bg); border-radius: 20px 20px 0 0; overflow: hidden; }
.sug-tab-btn { flex: 1; padding: 14px 16px; border: none; background: transparent; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.2s; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sug-tab-btn.active { color: var(--accent); }
.sug-tab-btn.active::after { content: ''; position: absolute; bottom: -1.5px; left: 16px; right: 16px; height: 2.5px; background: var(--accent); border-radius: 2px; }
.sug-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; display: inline-block; }
.sug-history-card { padding: 14px; background: var(--bg); border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--border); }
.sug-history-card:last-child { margin-bottom: 0; }
.sug-history-text { font-size: 0.85rem; line-height: 1.5; color: var(--text); margin-bottom: 8px; white-space: pre-wrap; }
.sug-history-date { font-size: 0.7rem; color: var(--muted); }
.sug-history-reply { margin-top: 10px; padding: 10px 12px; background: var(--surface); border-radius: 10px; border-left: 3px solid var(--accent); }
.sug-history-reply-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 4px; }
.sug-history-reply-text { font-size: 0.82rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.sug-history-pending { margin-top: 8px; font-size: 0.72rem; color: var(--muted); font-weight: 600; font-style: italic; }
/* Universal Loading Spinners & Animation */
.spin,
svg.spin {
  animation: spin 0.85s linear infinite !important;
  display: inline-block;
  transform-origin: center;
  transform-box: fill-box;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite !important;
  display: inline-block;
  box-sizing: border-box;
}

.big-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite !important;
  display: inline-block;
  box-sizing: border-box;
}

.loader {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite !important;
  display: inline-block;
  box-sizing: border-box;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════ */
/*  CUSTOM DROPDOWN COMPONENT (.sem-dropdown)             */
/* ═══════════════════════════════════════════════════════ */
.sem-dropdown {
  position: relative;
  flex-shrink: 0;
}
.sem-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0 26px 0 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sem-trigger:hover {
  border-color: var(--accent);
}
.sem-dropdown.open .sem-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.sem-trigger-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  text-align: center;
  flex: 1;
}
.sem-trigger-chevron {
  color: var(--muted);
  display: flex;
  align-items: center;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sem-dropdown.open .sem-trigger-chevron {
  transform: translateY(-50%) rotate(180deg);
}
.sem-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 60;
  padding: 4px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-sizing: border-box;
}
.sem-dropdown.open .sem-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sem-option {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: center;
  font-family: inherit;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease;
}
.sem-option:hover {
  background: var(--bg);
}
.sem-option.active {
  color: var(--accent) !important;
  font-weight: 800 !important;
  background: rgba(37, 99, 235, 0.1) !important;
}
[data-theme=dark] .sem-option.active {
  color: #60a5fa !important;
  background: rgba(37, 99, 235, 0.2) !important;
}
.sem-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: none;
}
.sem-dropdown.open .sem-backdrop {
  display: block;
}