/* AsemanCRM · customer portal — Aseman brand blues on top of samin.css. Author: SPSDEVNIC.NET */
body.portal {
  --brand: #1e9ad6;
  --brand-2: #1b6fb5;
  --navy: #1a2463;
  --navy-2: #22307a;
  --sky: #e3f1fb;
  --sky-2: #cfe6f7;
  --canvas: #dfeaf7;
  --canvas-2: #c9dcf2;
  --shell: #f5f8fc;
  --lav: #e1edfa;
  --lav-ink: #1d4f8c;
  --purple: #1e9ad6;
  --purple-2: #8cc8ec;
  --dark: #1a2463;
  --lime: #d9f0fb;
  --lime-2: #bfe4f7;
  --lime-ink: #10507a;
  --magenta: #1b6fb5;
  --shadow: 0 30px 80px -40px rgba(20, 60, 130, .38);
}
body.portal .canvas {
  background:
    radial-gradient(900px 500px at 85% -10%, #eef6fd 0%, transparent 60%),
    radial-gradient(700px 600px at -10% 110%, var(--canvas-2) 0%, transparent 60%),
    var(--canvas);
}
body.portal .rail-link.is-on { background: linear-gradient(150deg, var(--brand) 0%, var(--navy) 100%); }
body.portal .rail-link.is-on .ic { color: #fff; }
body.portal .rail-badge { background: var(--brand); box-shadow: 0 0 0 2px var(--shell); }
body.portal .top-brand { color: var(--brand-2); }
body.portal .avatar { background: linear-gradient(150deg, var(--brand), var(--navy)); }
body.portal .btn { background: var(--navy); border-color: var(--navy); }
body.portal .btn:hover { background: #121a4a; }
body.portal .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
body.portal .btn-ghost:hover { background: #fff; border-color: #a9cbe8; }
body.portal .btn-lime { background: var(--brand); border-color: var(--brand); color: #fff; }
body.portal .btn-lime:hover { background: var(--brand-2); }
body.portal .kpi-dark { background: linear-gradient(150deg, var(--brand-2) 0%, var(--navy) 100%); border-color: transparent; }
body.portal .stat.dark { background: linear-gradient(150deg, var(--brand-2), var(--navy)); }
body.portal .chip-lime, body.portal .tag-paid { background: #d8f1e3; color: #1d6b3c; }
body.portal .tag-off { background: var(--sky); color: var(--lav-ink); }
body.portal .pager a.is-on { background: var(--navy); }
body.portal .fab { background: var(--navy); color: #fff; }
body.portal .fab .ic { border-color: #fff; }
body.portal .msg-staff { background: #e1f0fb; }
body.portal .msg-cust { background: #fff; }

/* support pill in the header */
.sup-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  background: #fff; border: 1px solid var(--line-2); color: var(--muted);
}
.sup-pill .ic { width: 18px; height: 18px; }
.sup-pill.active { background: #d8f1e3; border-color: #bfe5cf; color: #1d6b3c; }
.sup-pill.expired { background: #fde6ee; border-color: #f4c6d6; color: #8d1f55; }
@media (max-width: 980px) { .sup-pill span { display: none; } .sup-pill { padding: 0 10px; } }

/* hero */
.hero {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 26px 28px;
  color: #fff;
  background:
    radial-gradient(600px 300px at 90% -20%, rgba(255, 255, 255, .22) 0%, transparent 60%),
    linear-gradient(150deg, var(--brand) 0%, var(--brand-2) 45%, var(--navy) 100%);
}
.hero h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.hero p { margin: 0; color: rgba(255, 255, 255, .85); }
.hero .hero-px { position: absolute; left: -10px; bottom: -2px; width: 46%; max-width: 380px; filter: brightness(0) invert(1); opacity: .14; pointer-events: none; }
.hero .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; position: relative; }
body.portal .hero .btn { background: #fff; color: var(--navy); border-color: #fff; }
body.portal .hero .btn:hover { background: var(--sky); border-color: var(--sky); }
body.portal .hero .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); }
body.portal .hero .btn-ghost:hover { background: rgba(255, 255, 255, .24); }
body.portal .hero .btn .ic { width: 18px; height: 18px; }

/* support meter */
.meter { height: 10px; border-radius: 6px; background: var(--sky); overflow: hidden; margin: 10px 0 6px; }
.meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--navy)); }
.meter.warn i { background: linear-gradient(90deg, #f1b84b, #e07b39); }
.meter.bad i { background: #e3a1bd; }

/* announcements */
.ann { border-radius: 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--line-2); border-inline-start: 5px solid var(--brand); }
.ann + .ann { margin-top: 12px; }
.ann.success { border-inline-start-color: #3f9a62; }
.ann.warning { border-inline-start-color: #e0a034; }
.ann.danger { border-inline-start-color: #c2366e; }
.ann h3 { font-size: 16px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.ann .ann-meta { font-size: 12px; color: var(--muted); }
.ann .ann-body { margin-top: 6px; line-height: 2; }
.ann.unread { box-shadow: 0 10px 30px -18px rgba(30, 110, 190, .55); }
.ann-link { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; transition: transform .15s; }
.ann-link:hover { transform: translateX(-3px); }
.ann-link > span { min-width: 0; display: flex; flex-direction: column; }
.ann-thumb { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; flex: none; background: #eef2f7; }
.ann-img { display: block; margin: 10px 0 4px; }
.ann-img img { display: block; max-width: 100%; max-height: 420px; border-radius: 14px; object-fit: contain; background: #f3f6fa; }
.new-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }

/* dept picker */
.dept-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dept-card { position: relative; display: block; cursor: pointer; }
.dept-card input { position: absolute; opacity: 0; pointer-events: none; }
.dept-card span { display: block; border: 1.5px solid var(--line-2); border-radius: 18px; padding: 14px 16px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.dept-card b { display: block; font-weight: 600; }
.dept-card small { color: var(--muted); }
.dept-card input:checked + span { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(30, 154, 214, .14); }
.dept-card input:disabled + span { opacity: .55; cursor: not-allowed; background: #f6f7f9; }
.dept-card input:focus-visible + span { outline: 2px solid var(--brand); }
@media (max-width: 700px) { .dept-cards { grid-template-columns: 1fr; } }

/* rating */
.stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars input { position: absolute; opacity: 0; }
.stars label { cursor: pointer; color: #cfd6df; }
.stars label .ic { width: 28px; height: 28px; fill: currentColor; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #f2b330; }

@media print {
  body.portal .canvas, body.portal .shell { background: #fff; }
}

/* ---------- top navigation (portal colours; layout lives in samin.css) ---------- */
body.portal .tb-brand b { color: var(--navy); }
body.portal .tb-brand small { color: var(--brand-2); }
body.portal .tb-item.is-on, body.portal .tb-group.is-on > .tb-item { background: linear-gradient(150deg, var(--brand) 0%, var(--navy) 100%); color: #fff; }
body.portal .tb-badge { background: var(--brand); }
body.portal .topbar { background: rgba(245, 248, 252, .92); }