/* ==========================================================================
   上课签到 / 考勤 —— 模块私有样式
   宣纸底 + 墨色骨架 + 朱砂点睛 + 鎏金细节；状态色为语义色
   ========================================================================== */

/* ---------------- 顶部：日期条 + 班级筹码 ---------------- */
.att-top{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  box-shadow:var(--sh-1);
  margin-bottom:14px;
  overflow:hidden;
}
.att-daterow{
  display:flex;align-items:center;gap:9px;padding:10px 12px;flex-wrap:wrap;
  border-bottom:1px dashed var(--line);
}
.att-date{
  width:auto;min-width:150px;height:32px;font-family:var(--f-num);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.att-datetext{
  font-family:var(--f-serif);font-size:14px;color:var(--ink-2);letter-spacing:.03em;
  white-space:nowrap;
}
.att-quick{margin-left:auto}
.att-quick button{font-family:var(--f-serif);letter-spacing:.04em}

.att-chiprow{
  display:flex;gap:8px;padding:11px 12px;overflow-x:auto;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.att-chiprow::-webkit-scrollbar{height:6px}
.att-chiprow::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}

.att-chip{
  display:flex;align-items:stretch;gap:9px;flex:0 0 auto;
  padding:0 13px 0 0;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--card-2);cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;
}
.att-chip:hover{border-color:var(--gold);background:#fff;box-shadow:var(--sh-1)}
.att-chip:active{transform:translateY(.5px)}
.att-chip .chip-rail{width:4px;flex:0 0 4px;border-radius:var(--r-s) 0 0 var(--r-s)}
.att-chip .chip-body{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:6px 0}
.att-chip .chip-name{font-family:var(--f-serif);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3;white-space:nowrap}
.att-chip .chip-meta{font-size:10.5px;color:var(--ink-4);white-space:nowrap;letter-spacing:.02em}
.att-chip.on{
  background:linear-gradient(180deg,#2C251E,#1A1613);
  border-color:#151210;
  box-shadow:var(--sh-2);
}
.att-chip.on .chip-name{color:#F5E9D6}
.att-chip.on .chip-meta{color:#A3957F}
.att-chip.on .chip-rail{box-shadow:0 0 0 1px rgba(199,154,69,.45)}

/* ---------------- 两栏骨架 ---------------- */
.att-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:16px;align-items:start;
}
.att-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.att-side{min-width:0;display:flex;flex-direction:column;gap:14px;position:sticky;top:72px;align-self:start;max-height:calc(100vh - 88px);overflow-y:auto}
@media (max-width:1180px){.att-side{position:static;max-height:none;overflow:visible}}

/* ---------------- 当天不排课 ---------------- */
.att-nolesson .empty{padding:34px 20px}
.att-nofoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nf-item{font-size:12px;color:var(--ink-3)}
.nf-item b{font-family:var(--f-num);font-size:13px;color:var(--ink-2);margin-right:4px}
.att-nofoot .btn{margin-left:auto}

/* ---------------- 课程头 ---------------- */
.att-lesson{
  display:flex;align-items:center;gap:16px;padding:14px 16px;flex-wrap:wrap;
  background:
    radial-gradient(520px 120px at 96% -30%, rgba(199,154,69,.10), transparent 70%),
    var(--card);
  border:1px solid var(--line);
}
.att-lesson::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#DFB15C,#B2873A);border-radius:var(--r-m) 0 0 var(--r-m);
}
.att-lesson .al-l{min-width:0;flex:1}
.al-kicker{font-size:11.5px;color:var(--ink-4);letter-spacing:.1em}
.al-title{
  font-family:var(--f-serif);font-size:19px;font-weight:700;letter-spacing:.05em;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:3px;
}
.al-sub{font-family:var(--f-sans);font-size:12px;font-weight:500;color:var(--ink-4);letter-spacing:.02em}
.al-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--ink-3)}
.al-meta .m-i{display:inline-flex;align-items:center;gap:5px}
.al-r{display:flex;align-items:center;gap:14px}
.al-stat{text-align:right;white-space:nowrap}
.al-stat b{
  display:block;font-family:var(--f-num);font-size:30px;font-weight:700;color:var(--jade);line-height:1;
}
.al-stat span{font-size:11px;color:var(--ink-4)}

/* ---------------- 统计条 ---------------- */
.att-stat{padding:14px 16px 15px}
.as-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.as-i{
  padding:8px 10px;border-radius:var(--r-s);background:var(--card-2);
  border:1px solid var(--line);border-left:3px solid var(--ink-5);
}
.as-i .as-l{display:block;font-size:11px;color:var(--ink-4);letter-spacing:.06em}
.as-i .as-v{display:block;font-family:var(--f-num);font-size:28px;font-weight:700;line-height:1.1;margin-top:2px}
.as-i.jade{border-left-color:var(--jade)}
.as-i.jade .as-v{color:var(--jade)}
.as-i.gold{border-left-color:var(--gold)}
.as-i.gold .as-v{color:var(--gold-d)}
.as-i.indigo{border-left-color:var(--indigo)}
.as-i.indigo .as-v{color:var(--indigo)}
.as-i.absent{border-left-color:#C99B95}
.as-i.absent .as-v{color:#9A5F57}
.as-i.rate{border-left-color:var(--cinnabar);background:linear-gradient(180deg,var(--cinnabar-l),var(--card-2))}
.as-i.rate .as-v{color:var(--cinnabar-d)}

.as-bar{
  display:flex;height:12px;border-radius:7px;overflow:hidden;background:var(--paper-2);
  margin-top:12px;border:1px solid var(--line);
}
.as-bar > i{display:block;height:100%;transition:width .4s cubic-bezier(.22,.9,.3,1)}
.sg-present{background:linear-gradient(90deg,#3E8C6A,#2E6B54)}
.sg-late{background:linear-gradient(90deg,#D6AC5E,#B2873A)}
.sg-leave{background:linear-gradient(90deg,#3A5B87,#2B4568)}
.sg-absent{background:linear-gradient(90deg,#D6A79E,#BC8A82)}
.sg-none{background:var(--paper-3)}

.as-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;color:var(--ink-3)}
.as-legend .lg-i{display:inline-flex;align-items:center;gap:5px}
.as-legend .lg-d{width:9px;height:9px;border-radius:2px;display:inline-block}
.as-legend b{font-family:var(--f-num);font-size:12.5px;color:var(--ink-2);margin-left:1px}

.as-note{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;
  padding:8px 11px;border-radius:var(--r-s);background:var(--paper-2);
  border:1px dashed var(--line-2);font-size:12.5px;color:var(--ink-2);
}
.as-note .as-ico{color:var(--ink-4);display:inline-flex}
.as-note.done{background:var(--jade-l);border-color:var(--jade-b);color:var(--jade)}
.as-note.done .as-ico{color:var(--jade)}
.as-note .as-low{
  display:inline-flex;align-items:center;gap:5px;color:var(--cinnabar-d);
  border-left:1px solid var(--cinnabar-b);padding-left:9px;margin-left:2px;font-size:12px;
}
.as-note .as-low > span{display:inline-flex}

/* ---------------- 名册卡片墙 ---------------- */
.att-roster .card-b{padding:12px}
.roster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;
}
.rcard{
  position:relative;overflow:hidden;padding:12px 12px 11px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-1);outline:none;transition:box-shadow .16s,border-color .16s,transform .1s;
}
.rcard:hover{box-shadow:var(--sh-2)}
.rcard:focus-visible{box-shadow:0 0 0 3px rgba(199,154,69,.32)}
.rcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--st-c,transparent);
}
.rcard.st-none{border-style:dashed;border-color:var(--line-2)}
.rcard.st-present{--st-c:var(--jade);border-color:var(--jade-b);background:linear-gradient(180deg,#F3F9F5,#fff 58%)}
.rcard.st-late{--st-c:var(--gold);border-color:var(--gold-b);background:linear-gradient(180deg,#FBF5E7,#fff 58%)}
.rcard.st-leave{--st-c:var(--indigo);border-color:var(--indigo-b);background:linear-gradient(180deg,#F2F5F9,#fff 58%)}
.rcard.st-absent{--st-c:#C08C84;border-color:var(--cinnabar-b);background:linear-gradient(180deg,#FCF4F2,#fff 58%)}
.rcard.st-makeup{--st-c:var(--gold-d);border-color:var(--gold-b);background:linear-gradient(180deg,#FBF5E7,#fff 58%)}

.rc-head{display:flex;align-items:center;gap:9px}
.rc-no{
  flex:0 0 auto;width:17px;height:17px;border-radius:3px;background:var(--paper-2);
  border:1px solid var(--line-2);color:var(--ink-4);font-size:10.5px;
  display:grid;place-items:center;line-height:1;
}
.rc-id{flex:1;min-width:0}
.rc-name{
  font-family:var(--f-serif);font-size:15px;font-weight:700;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rc-tags{display:flex;align-items:center;gap:6px;margin-top:3px}
.rc-age{font-size:10.5px;color:var(--ink-4)}
.rc-rem{flex:0 0 auto;text-align:right;line-height:1.15}
.rc-rem b{display:block;font-family:var(--f-num);font-size:19px;font-weight:700;color:var(--ink-2)}
.rc-rem span{font-size:10px;color:var(--ink-4);letter-spacing:.04em}
.rc-rem.low b{color:var(--cinnabar)}
.rc-rem.low span{color:var(--cinnabar-d)}
.rc-rem.out b{color:var(--ink-4);text-decoration:line-through}
.rc-rem.out span{color:var(--cinnabar-d)}

.rc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);
}
.rc-state{
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-4);
}
.rcard.st-present .rc-state{color:var(--jade)}
.rcard.st-late .rc-state{color:var(--gold-d)}
.rcard.st-leave .rc-state{color:var(--indigo)}
.rcard.st-absent .rc-state{color:#9A5F57}
.rcard.st-makeup .rc-state{color:var(--gold-d)}
.rc-hist{font-size:11px;color:var(--ink-4);white-space:nowrap}

.rc-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:9px}
.rb{
  height:40px;border-radius:var(--r-s);border:1px solid var(--line-2);
  background:var(--card-2);color:var(--ink-3);font-size:12.5px;font-weight:600;
  transition:background .14s,border-color .14s,color .14s,transform .08s;
}
.rb:hover{background:#fff;border-color:var(--ink-5);color:var(--ink)}
.rb:active{transform:translateY(.5px)}
.rb-present.on{background:linear-gradient(180deg,#3E8C6A,#255341);border-color:#255341;color:#F0F8F4}
.rb-late.on{background:linear-gradient(180deg,#D6AC5E,#A87F31);border-color:#A87F31;color:#3A2A0B}
.rb-leave.on{background:linear-gradient(180deg,#3A5B87,#223753);border-color:#223753;color:#EFF3F8}
.rb-absent.on{background:linear-gradient(180deg,#D2A199,#B2857D);border-color:#A9766E;color:#FFF4F1}

.rc-mk{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-size:11.5px;color:var(--gold-d);border-bottom:1px dashed var(--gold-b);padding-bottom:1px;
}
.rc-mk:hover{color:var(--cinnabar);border-color:var(--cinnabar-b)}
.rc-mkflag{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-size:11.5px;color:var(--gold-d);
}

/* ---------------- 补课区 ---------------- */
.att-makeup .card-b{padding:4px 14px 12px}
.mk-list{display:flex;flex-direction:column}
.mk-row{
  display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--paper-2);
}
.mk-row:last-child{border-bottom:0}
.mk-l{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.mk-txt{min-width:0}
.mk-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mk-name b{font-family:var(--f-serif);font-size:14px;letter-spacing:.04em}
.mk-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;font-size:11.5px;color:var(--ink-4)}
.mk-dot{color:var(--ink-5)}
.mk-r{display:flex;gap:7px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.mk-tip{
  margin-top:12px;padding:9px 11px;border-radius:var(--r-s);
  background:var(--gold-l);border:1px solid var(--gold-b);
  font-size:12px;color:var(--gold-d);
}

/* ---------------- 今日课程总览 ---------------- */
.att-today .tl{padding:6px 4px}
.tl-item.next{border-left:2px dotted var(--line-3)}
.tl-item.now .tl-name{color:var(--ink)}
.tl-item .btn-outline-cinnabar{margin-left:2px}

/* ---------------- 近期开课记录 ---------------- */
.att-recent .rec-tbl{font-size:12px}
.att-recent .rec-tbl thead th{padding:7px 9px;font-size:10.5px}
.att-recent .rec-tbl tbody td{padding:7px 9px;vertical-align:middle}
.rec-row{cursor:pointer;transition:background .14s}
.rec-row:hover{background:var(--card-2)}
.rec-row:hover .rr-cls{color:var(--cinnabar-d)}
.rr-d{font-family:var(--f-num);font-size:12px;font-weight:700;white-space:nowrap}
.rr-w{font-size:10.5px;color:var(--ink-4)}
.rr-cls{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.rr-coach{font-size:10.5px;color:var(--ink-4)}
.rr-bar{display:flex;align-items:center;gap:7px}
.rr-bar .mini-bar{flex:1;min-width:44px}
.rr-pct{font-size:11.5px;color:var(--ink-3);flex:0 0 auto;min-width:30px;text-align:right}

/* ---------------- 窄屏 ---------------- */
@media (max-width:1180px){
  .att-grid{grid-template-columns:minmax(0,1fr)}
  .att-side{flex-direction:row;flex-wrap:wrap}
  .att-side > .card{flex:1 1 340px;min-width:0}
}
@media (max-width:980px){
  .as-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .roster{grid-template-columns:repeat(auto-fill,minmax(206px,1fr))}
  .al-r{margin-left:auto}
}
@media (max-width:640px){
  .as-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roster{grid-template-columns:minmax(0,1fr)}
  .att-quick{width:100%;margin-left:0}
  .att-quick button{flex:1}
  .att-datetext{width:100%;order:9}
  .mk-row{flex-direction:column;align-items:stretch;gap:9px}
  .mk-r{justify-content:flex-start}
  .rc-acts{gap:5px}
  .rb{height:44px}
}