/* public/assets/app.css */
:root{
  --c-bg:#f6f7fb; /* app background */
  --c-card:#ffffff; /* surfaces */
  --c-border:#e9ecef;
  --c-text:#212529;
  --c-muted:#6c757d;
  --c-primary:#0d6efd;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 1px rgba(16,24,40,.02);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:var(--c-card);border-bottom:1px solid var(--c-border);box-shadow:var(--shadow)}
.topbar__inner{max-width:1200px;margin:0 auto;padding:.6rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.topbar__left{display:flex;align-items:center;gap:.5rem}
.brand{font-weight:700;text-decoration:none;color:var(--c-text)}
.btn-icon{border:1px solid var(--c-border);background:#fff;border-radius:8px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.btn-icon:hover{background:#f8f9fa}
.i-menu{display:block;width:18px;height:2px;background:var(--c-text);position:relative}
.i-menu::before,.i-menu::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--c-text)}
.i-menu::before{top:-6px}.i-menu::after{top:6px}
.topbar__right{display:flex;align-items:center;gap:.6rem}
.topbar .btn{padding:.45rem .7rem;background:var(--c-primary);color:#fff;border-radius:8px;text-decoration:none}
.topbar .btn:hover{filter:brightness(.98)}
.topbar .lnk{color:var(--c-text);text-decoration:none;padding:.25rem .35rem;border-radius:6px}
.topbar .lnk:hover{background:#f1f3f5}
.topbar .lnk.is-active{ color:var(--c-primary); font-weight:700; background:linear-gradient(90deg, rgba(13,110,253,.12), rgba(13,110,253,0) 70%); }
.topbar .lnk.is-active::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  border:2px solid var(--c-primary);
  border-radius:50%;
  margin-right:6px;
  box-shadow: 0 0 0 2px rgba(13,110,253,.18);
}
.topbar .who{color:var(--c-muted);font-size:.95rem}

/* App layout with sidebar */
.app-wrap{display:flex;align-items:stretch;min-height:calc(100vh - 56px)}
.sidebar{width:260px;flex:0 0 260px;border-right:1px solid var(--c-border);background:#fff;padding:.75rem .75rem;position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto}
.app-main{flex:1 1 auto;padding:1rem;max-width:100%}

.side__title{font-size:.8rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em;margin:.75rem .5rem .25rem}
.side__link{display:block;color:var(--c-text);text-decoration:none;padding:.5rem .6rem;border-radius:8px;margin:.15rem .25rem}
.side__link:hover{background:#f8f9fa}
.side__link.is-active{background:#e7f1ff;color:var(--c-primary);font-weight:600}

/* Cards and utilities */
.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;box-shadow:var(--shadow)}
.container{max-width:1200px;margin:0 auto}
.grid{display:grid;gap:.75rem}

/* Responsive */
@media (max-width: 960px){
  .sidebar{position:fixed;left:-280px;transition:left .2s ease}
  html.sidebar-open .sidebar{left:0}
  .app-main{padding:1rem}
}

/* Sidebar Modern Look */
.sidebar.modern{
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(13,110,253,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right: 1px solid var(--c-border);
  padding: 1rem .85rem;
}

.sidebar.modern .side__section{
  background: #fff;
  border: 1px solid rgba(16,24,40,.06);
  border-radius: 12px;
  padding: .5rem;
  margin: .6rem .1rem;
  box-shadow: var(--shadow);
}

.sidebar.modern .side__title{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--c-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .5rem .2rem;
}

.sidebar.modern .side__link{
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .6rem .55rem .65rem;
  margin: .15rem .25rem;
  border-radius: 10px;
  transition: background .16s ease, transform .16s ease, color .16s ease;
}

.sidebar.modern .side__link:hover{
  background: linear-gradient(90deg, rgba(13,110,253,.08), rgba(13,110,253,0) 70%);
  transform: translateX(2px);
}

.sidebar.modern .side__link::before{
  content: "";
  position: absolute;
  left: -4px;
  top: 18%;
  width: 3px;
  height: 64%;
  background: var(--c-primary);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0);
  transition: transform .2s ease, opacity .2s ease;
}

.sidebar.modern .side__link.is-active,
.sidebar.modern .side__link:focus-visible{
  background: #e7f1ff;
  color: var(--c-primary);
  outline: none;
}

.sidebar.modern .side__link.is-active::before,
.sidebar.modern .side__link:hover::before{
  opacity: 1;
  transform: scaleY(1);
}

.sidebar.modern .side__icon{
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-size: 18px;
  line-height: 1;
}

.sidebar.modern .side__icon svg{
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.sidebar.modern .side__label{ flex:1; }

/* Student Picker (studpick) */
.studpick{ position:relative; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.studpick__input{
  width:100%;
  padding:.5rem .9rem;
  padding-right: 2.2rem; /* space for clear button */
  border:1px solid var(--c-border);
  border-radius:10px;
  background:#fff;
}
.studpick__input:focus{ outline:2px solid rgba(13,110,253,.25); outline-offset: 1px; }
.studpick__clear{
  position:absolute; right:.35rem; top:.35rem;
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; border-radius:6px; cursor:pointer; color:#666;
}
.studpick__clear:hover{ background:#f1f3f5; color:#111; }
.studpick__dd{
  position:absolute; left:0; right:0; top: calc(100% + 4px);
  background:#fff; border:1px solid var(--c-border); border-radius:10px; box-shadow: var(--shadow);
  z-index:60; display:none; max-height:260px; overflow:auto;
}
.studpick__list{ list-style:none; margin:0; padding:.25rem; }
.studpick__item{ padding:.45rem .6rem; border-radius:8px; cursor:pointer; }
.studpick__item:hover, .studpick__item.is-active{ background:#f1f3f5; }
.studpick__primary{ font-weight:600; }
.studpick__secondary{ font-size:.9rem; color:var(--c-muted); }
.studpick__info{ width:100%; }
.studpick__card{ border:1px solid var(--c-border); border-radius:10px; padding:.55rem .65rem; background:#fff; margin-top:.4rem; }
.studpick__card_title{ font-weight:700; }
.studpick__card_meta{ color:var(--c-muted); font-size:.92rem; }

/* Brand in navbar */
.brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--c-text); }
.brand__logo{ display:block; width:28px; height:28px; border-radius:6px; }
.brand__text{ font-weight:800; letter-spacing:.2px; }

/* Auth pages */
.auth{ min-height:calc(100vh - 56px); display:grid; place-items:center; padding:1.5rem .75rem; }
.auth__card{ width:100%; max-width:480px; padding:1.1rem 1.1rem 1.25rem; border-radius:14px; }
.auth__head{ text-align:center; margin-bottom:.5rem; }
.auth__logo{ height:64px; width:auto; border-radius:0; display:inline-block; max-width:100%; object-fit:contain; }
.auth__title{ margin:.6rem 0 .2rem; font-size:1.35rem; }
.auth__subtitle{ margin:0 0 1rem 0; color:var(--c-muted); }

.field{ margin-bottom:.9rem; }
.label{ display:block; margin-bottom:.35rem; color:var(--c-text); font-weight:600; }
.input{ width:100%; padding:.7rem .85rem; border:1px solid var(--c-border); border-radius:10px; background:#fff; }
.input:focus{ outline:2px solid rgba(13,110,253,.25); outline-offset:1px; }

.btn-primary{ display:inline-block; padding:.75rem 1rem; background:var(--c-primary); color:#fff; border-radius:10px; border:none; text-decoration:none; font-weight:600; cursor:pointer; }
.btn-primary:hover{ filter:brightness(.98); }

.w-100{ width:100%; }
.muted{ color:var(--c-muted); }
.small{ font-size:.92rem; }

.alert{ border-radius:10px; padding:.75rem 1rem; border:1px solid transparent; }
.alert-error{ background:#fde2e2; border-color:#f5c2c7; color:#a30000; }