/* Agam Scheduler — minimal design system */
:root{
  --bg:#FDFCFA; --ink:#1C1B18; --soft:#6E6A61; --faint:#A39E93;
  --line:#ECE8E0; --green:#1E5247; --green-lt:#EDF4F1; --amber:#B26A2B; --amber-lt:#FBF3E6;
  --red:#A94438; --red-lt:#FAEFED;
}
*{box-sizing:border-box; margin:0;}
body{background:var(--bg); color:var(--ink); font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
button{font:inherit; cursor:pointer; border:none; background:none;}
input,select{font:inherit;}

.app{display:flex; height:100vh; overflow:hidden;}
aside{width:250px; flex-shrink:0; border-right:1px solid var(--line); padding:44px 0 24px 40px;
  display:flex; flex-direction:column; overflow-y:auto;}
.brand{font-weight:800; font-size:1.15rem; margin-bottom:44px;}
.brand span{color:var(--green);}
.side-label{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:12px;}
.snav{display:flex; flex-direction:column; gap:2px; margin-bottom:36px;}
.snav button{display:flex; align-items:center; gap:12px; padding:9px 12px 9px 0; text-align:left;
  color:var(--soft); font-size:.95rem; font-weight:500; transition:color .15s;}
.snav button:hover{color:var(--ink);}
.snav button.on{color:var(--ink); font-weight:700;}
.tick{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:.62rem; color:var(--faint); flex-shrink:0;
  font-weight:700; background:#fff;}
.done .tick{background:var(--green); border-color:var(--green); color:#fff;}
.on .tick{border-color:var(--green); color:var(--green);}
.side-foot{margin-top:auto; padding:16px 40px 0 0; font-size:.82rem; color:var(--faint);}
.side-foot .link{display:block; margin-top:6px;}

main{flex:1; overflow-y:auto; padding:64px 60px;}
.wrap{max-width:680px; margin:0 auto;}
.wrap.wide{max-width:860px;}
h1{font-size:2rem; font-weight:800; letter-spacing:-.02em; margin-bottom:8px;}
.sub{color:var(--soft); margin-bottom:40px; font-size:1.02rem; max-width:52ch;}
h2{font-size:1.1rem; font-weight:800; margin:40px 0 14px;}

.link{color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.muted{color:var(--faint);}
.small{font-size:.85rem;}

/* upload area */
.up{display:flex; align-items:center; gap:14px; margin-bottom:8px; flex-wrap:wrap;}
.btn{background:var(--green); color:#fff; padding:12px 22px; border-radius:10px;
  font-weight:700; font-size:.95rem; display:inline-flex; align-items:center; gap:8px;}
.btn:hover{opacity:.9;}
.btn.sm{padding:8px 14px; font-size:.85rem; border-radius:8px;}
.btn.ghost{background:transparent; color:var(--green); border:1.5px solid var(--line);}
.btn.ghost:hover{border-color:var(--green);}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.fmt{color:var(--faint); font-size:.82rem; margin-bottom:44px;}
.fmt code{background:#F4F1EB; padding:2px 7px; border-radius:5px; font-size:.78rem;}

/* rows */
.rows{border-top:1px solid var(--line);}
.row{display:flex; align-items:center; gap:14px; padding:15px 4px; border-bottom:1px solid var(--line);}
.row .grow{flex:1; min-width:0;}
.row .name{font-weight:600;}
.row .meta{color:var(--faint); font-size:.86rem;}
.row.dim .name,.row.dim .meta{opacity:.4;}
.count{color:var(--faint); font-size:.85rem; margin-bottom:12px;}
.x{color:var(--faint); font-size:.84rem; font-weight:600; flex-shrink:0;}
.x:hover{color:var(--red);}

/* toggle */
.tg{position:relative; width:40px; height:22px; cursor:pointer; flex-shrink:0;}
.tg input{display:none;}
.tg i{position:absolute; inset:0; background:var(--line); border-radius:99px; transition:.18s;}
.tg i::after{content:""; position:absolute; top:2.5px; left:3px; width:17px; height:17px;
  background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 2px rgba(0,0,0,.2);}
.tg input:checked + i{background:#2E7A66;}
.tg input:checked + i::after{left:20px;}

/* inputs */
.in{padding:10px 13px; border:1.5px solid var(--line); border-radius:10px; background:#fff; font-size:.94rem;}
.in:focus{outline:none; border-color:var(--green);}
.in.sm{padding:7px 10px; font-size:.88rem; border-radius:8px;}
.n-in{width:66px; padding:7px 4px; text-align:center; border:1px solid var(--line);
  border-radius:8px; background:#fff; font-size:.9rem;}
.n-in:focus{outline:none; border-color:var(--green);}
select.sugg{background:var(--amber-lt); border-color:#E8CFA4;}

/* tags & chips */
.tag{font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:99px; flex-shrink:0;}
.tag.a{background:var(--amber-lt); color:var(--amber);}
.tag.g{background:var(--green-lt); color:var(--green);}
.tag.r{background:var(--red-lt); color:var(--red);}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; background:#F4F1EB;
  padding:3px 11px; border-radius:99px; margin:2px 4px 2px 0; color:var(--soft);}
.chip b{cursor:pointer; color:var(--faint);}
.chip b:hover{color:var(--red);}

/* forms & modal */
.frm{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:14px 0;}
.fld{display:flex; flex-direction:column; gap:5px;}
.fld label{font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);}
.modal-bg{position:fixed; inset:0; background:rgba(28,27,24,.35); display:none;
  align-items:flex-start; justify-content:center; padding:60px 20px; z-index:30; overflow-y:auto;}
.modal-bg.show{display:flex;}
.modal{background:#fff; border-radius:16px; padding:32px; width:100%; max-width:560px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);}
.modal h3{font-size:1.25rem; font-weight:800; margin-bottom:6px;}
.modal .sub{margin-bottom:22px; font-size:.92rem;}
.modal-close{float:right; color:var(--faint); font-size:1.2rem; font-weight:700;}

/* notices */
.notice{border-radius:12px; padding:16px 20px; margin-bottom:24px; font-size:.92rem;}
.notice.g{background:var(--green-lt); color:var(--green);}
.notice.a{background:var(--amber-lt); color:var(--amber);}
.notice.r{background:var(--red-lt); color:var(--red);}
.err-list{border-top:1px solid var(--line); margin-top:8px; max-height:220px; overflow-y:auto;}
.err-item{padding:9px 2px; border-bottom:1px solid var(--line); font-size:.86rem; display:flex; gap:10px;}
.err-item .ln{color:var(--faint); font-weight:700; flex-shrink:0; width:56px;}

/* toast */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:11px 22px; border-radius:99px; font-size:.88rem;
  font-weight:600; opacity:0; transition:.25s; pointer-events:none; z-index:60; max-width:88vw; text-align:center;}
.toast.show{opacity:1;}
.fade{animation:f .3s ease both;}
@keyframes f{from{opacity:0; transform:translateY(6px);} to{opacity:1;}}

/* login page */
.login-page{min-height:100vh; display:grid; place-items:center; padding:24px;}
.login-card{width:100%; max-width:380px;}
.login-card .brand{font-size:1.5rem; margin-bottom:8px;}
.login-card .sub{margin-bottom:32px;}
.login-card .in{width:100%; margin-bottom:14px;}
.login-card .btn{width:100%; justify-content:center; margin-top:6px;}

@media(max-width:860px){
  .app{flex-direction:column; overflow:auto; height:auto;}
  aside{width:100%; padding:24px; border-right:none; border-bottom:1px solid var(--line);}
  .snav{flex-direction:row; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
  main{padding:36px 20px;}
}