/* ===== Angeline CRM — chỉnh giao diện bản online (B3) =====
   Nạp sau CSS gốc, chỉ ghi đè. Dùng lại biến màu của app nên tự theo giao diện sáng / tối. */

/* ---------- màn hình chờ lúc mở app ---------- */
html:not(.ag-ready) .app, html:not(.ag-ready) #auth { visibility: hidden; }
html:not(.ag-ready) body::before {
  content: "Angeline CRM"; position: fixed; inset: 0; display: grid; place-items: center; padding-top: 70px;
  font: 600 15px var(--font); color: var(--muted); letter-spacing: .02em; z-index: 9998;
}
html:not(.ag-ready) body::after {
  content: ""; position: fixed; left: 50%; top: 50%; width: 38px; height: 38px; margin: -34px 0 0 -19px; z-index: 9999;
  border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: ag-spin .8s linear infinite;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

/* ---------- trang đăng nhập ---------- */
#auth.ag-auth {
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--bg);
}
#auth.ag-auth[hidden] { display: none; }
.ag-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: clamp(28px, 5vw, 64px); color: #fff;
  background:
    radial-gradient(1200px 600px at -10% -20%, color-mix(in srgb, var(--ag) 85%, transparent), transparent 60%),
    radial-gradient(900px 500px at 120% 110%, color-mix(in srgb, var(--ace) 75%, transparent), transparent 60%),
    linear-gradient(135deg, #2a1440 0%, #1a1636 55%, #121a3a 100%);
}
.ag-hero::after {
  content: ""; position: absolute; right: -160px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
.ag-logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.ag-logo i {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 20px;
  background: linear-gradient(135deg, var(--ag), #ff9bbd); box-shadow: 0 8px 24px rgba(214, 51, 108, .45);
}
.ag-logo b i { all: unset; color: #ff8fb7; }
.ag-hero h1 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.18; font-weight: 700; letter-spacing: -.02em; max-width: 520px; margin: 0; }
.ag-hero p { margin: 14px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; max-width: 470px; line-height: 1.6; }
.ag-units { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ag-units span {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
}
.ag-units span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.ag-feats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; max-width: 520px; }
.ag-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(255, 255, 255, .86); line-height: 1.45; }
.ag-feats li::before {
  content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.ag-hero small { color: rgba(255, 255, 255, .55); font-size: 12px; }
.ag-panel { position: relative; z-index: 1; display: grid; place-items: center; padding: clamp(24px, 5vw, 56px) 20px; }
#auth.ag-auth .auth-card {
  width: min(420px, 100%); padding: 34px 32px 26px; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20, 22, 50, .06), 0 24px 60px rgba(20, 22, 50, .12);
}
#auth.ag-auth .auth-card h2 { font-size: 24px; letter-spacing: -.01em; margin: 0 0 4px; }
#auth.ag-auth .auth-card .ag-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 6px; }
#auth.ag-auth .auth-card .stack { gap: 14px; }
#auth.ag-auth .auth-card label.f { font-weight: 600; font-size: 13px; }
#auth.ag-auth .auth-card input:not([type=checkbox]) { height: 44px; padding: 0 14px; border-radius: 11px; font-size: 14.5px; margin-top: 6px;
  background: var(--surface-2); border: 1px solid transparent; color: var(--ink); }
#auth.ag-auth .auth-card input:not([type=checkbox]):focus { background: var(--surface); border-color: var(--accent); }
#auth.ag-auth .auth-card .btn.pri { height: 46px; border-radius: 11px; font-size: 15px; font-weight: 700; width: 100%; margin-top: 4px; letter-spacing: .01em; }
#auth.ag-auth .auth-card .link { margin-top: 2px; }
#auth.ag-auth .auth-card .err:not(:empty) { background: var(--bad-soft); color: var(--bad); padding: 9px 12px; border-radius: 10px; font-size: 13px; }
#auth.ag-auth .auth-card > p.mut:last-child { text-align: center; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px !important; }
@media (min-width: 901px) { #auth.ag-auth .auth-card > .brand { display: none; } }
@media (max-width: 900px) {
  #auth.ag-auth { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .ag-hero { padding: 22px 20px 26px; gap: 0; }
  .ag-hero h1, .ag-hero p, .ag-feats, .ag-hero small { display: none; }
  .ag-units { margin-top: 14px; }
  .ag-units span { font-size: 12px; padding: 5px 10px; }
  .ag-panel { place-items: start center; margin-top: -14px; padding-top: 0; }
  #auth.ag-auth .auth-card { padding: 26px 20px 20px; }
  #auth.ag-auth .auth-card > .brand { display: none; }
}

/* ---------- thanh cuộn mảnh theo màu giao diện ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* ---------- ô nhập, nút ---------- */
input[type=text], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=password], input[type=time], input[type=email], select, textarea {
  transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.btn { transition: background-color .15s, border-color .15s, filter .15s, transform .05s; }
.btn:not(.pri):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.btn:active { transform: translateY(1px); }

/* ---------- bộ lọc: dàn đều, không còn 1 ô rớt xuống dòng riêng ---------- */
@media (min-width: 901px) {
  .filters { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
  .filters > input:first-child, .filters > input[type=search] { grid-column: span 2; }
}

/* ---------- bảng: bo góc gọn, dòng đang rê chuột rõ hơn ---------- */
.xgw { border-radius: 12px; }
.xg thead th { letter-spacing: .01em; }

/* ---------- thanh trạng thái kết nối (online.js) ---------- */
.ag-offline { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9999; padding: 8px 16px; border-radius: 999px;
  font: 500 12.5px var(--font); background: var(--warn); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.mob .ag-offline { bottom: 86px; }

/* trao đổi nội bộ theo đơn */
.agchat{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line);border-radius:10px}
.agcm{display:block;max-width:85%;align-self:flex-start;background:rgba(255,255,255,.06);border-radius:10px;padding:6px 10px}
.agcm.me{align-self:flex-end;background:rgba(236,72,153,.16)}
.agch{display:flex;gap:8px;align-items:baseline;font-size:12px;margin-bottom:2px}.agch span{display:inline;color:var(--muted)}.agch .link{margin-left:auto;padding:0 2px;color:var(--muted)}
.agcb{display:block;font-size:13.5px;line-height:1.45;word-break:break-word}
.agcin{display:flex;gap:8px;align-items:flex-end;margin-top:6px}.agcin textarea{flex:1;resize:vertical}
/* lịch ngày: ảnh trên thẻ việc */
.tcw{display:flex;gap:10px;align-items:flex-start;text-align:left}.tcx{flex:1;min-width:0}
.tci{width:92px;height:92px;flex:none;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}
.tci img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){.tci{width:72px;height:72px}}