/* ==========================================================================
   PMB Portfolio demos — app UI (Inventory, HR & Payroll)
   ========================================================================== */
:root {
  --pmb-red: #F7022B; --pmb-crimson: #EA0D52; --pmb-orange: #F18934;
  --pmb-violet: #5055F1; --pmb-blue: #19A0FA; --pmb-navy: #06006E;
  --dm-bg: #f4f5fb;
  --dm-card: #ffffff;
  --dm-ink: #1d1b4b;
  --dm-muted: #62658a;
  --dm-line: #e6e7f2;
  --dm-ok: #11a36a; --dm-warn: #d98a06; --dm-err: #e0264b; --dm-info: #3b6ff5;
  --dm-grad: linear-gradient(100deg, var(--pmb-violet), var(--pmb-crimson));
  --dm-radius: 16px;
  --dm-shadow: 0 10px 30px -18px rgba(6, 0, 110, .35);
  --dm-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dm-mono: "JetBrains Mono", ui-monospace, monospace;
  --dm-bar-h: 46px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.dm-body { margin: 0; background: var(--dm-bg); color: var(--dm-ink); font-family: var(--dm-font); font-size: 15px; line-height: 1.5; }
a { color: var(--pmb-violet); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--pmb-violet); outline-offset: 2px; }

/* ---------- demo bar (marks this as a demo) ---------- */
.dm-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .8rem;
  height: var(--dm-bar-h); padding: 0 1rem;
  background: linear-gradient(90deg, #07042a, #120c55 55%, #2a0b3f);
  color: #fff; font-size: .85rem;
}
.dm-bar a { color: #fff; text-decoration: none; }
.dm-bar__back { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; opacity: .9; }
.dm-bar__back:hover { opacity: 1; }
.dm-bar__badge { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem; border-radius: 99px; background: rgba(255,255,255,.12); font-family: var(--dm-mono); font-size: .75rem; }
.dm-bar__badge i { color: var(--pmb-orange); }
.dm-bar__spacer { flex: 1; }
.dm-bar__btn { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: transparent; color: #fff; cursor: pointer; font-size: .8rem; }
.dm-bar__btn:hover { background: rgba(255,255,255,.1); }
.dm-bar__cta { padding: .4rem .9rem; border-radius: 10px; background: var(--dm-grad); font-weight: 600; font-size: .8rem; }

/* ---------- app layout ---------- */
.dm-root { min-height: calc(100vh - var(--dm-bar-h)); }
.dm-boot { display: grid; place-items: center; min-height: 60vh; color: var(--dm-muted); }
.dm-app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - var(--dm-bar-h)); }

.dm-side {
  position: sticky; top: var(--dm-bar-h); height: calc(100vh - var(--dm-bar-h));
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.1rem .9rem; background: #0b0838; color: #d7d8f5; overflow-y: auto;
}
.dm-side__brand { display: flex; align-items: center; gap: .7rem; padding: .3rem .4rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.dm-side__brand strong { display: block; color: #fff; font-size: 1rem; line-height: 1.2; }
.dm-side__brand small { color: #9b9cc8; font-size: .75rem; }
.dm-side__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--dm-grad); color: #fff; flex: none; }

.dm-nav { display: grid; gap: .2rem; }
.dm-nav__link { position: relative; display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: 11px; color: #c9cbf0; text-decoration: none; font-weight: 500; font-size: .93rem; transition: background .2s, color .2s; }
.dm-nav__link i { width: 18px; text-align: center; color: #8f91d6; }
.dm-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.dm-nav__link.is-active { background: var(--dm-grad); color: #fff; box-shadow: 0 8px 20px -10px var(--pmb-crimson); }
.dm-nav__link.is-active i { color: #fff; }
.dm-nav__link.is-tour::after { content: ""; position: absolute; right: .7rem; width: 9px; height: 9px; border-radius: 50%; background: var(--pmb-orange); box-shadow: 0 0 0 0 rgba(241,137,52,.7); animation: dm-ping 1.6s infinite; }
.dm-nav__count { margin-left: auto; padding: .05rem .5rem; border-radius: 99px; background: var(--dm-err); color: #fff; font-style: normal; font-size: .72rem; font-weight: 700; }
@keyframes dm-ping { 70% { box-shadow: 0 0 0 9px rgba(241,137,52,0); } 100% { box-shadow: 0 0 0 0 rgba(241,137,52,0); } }

.dm-side__extra { margin-top: auto; padding: .8rem; border-radius: 12px; background: rgba(255,255,255,.05); font-size: .8rem; color: #b7b9e6; }
.dm-side__extra strong { color: #fff; }
.dm-side__user { display: flex; align-items: center; gap: .65rem; padding: .7rem .5rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.dm-side__user strong { display: block; color: #fff; font-size: .88rem; line-height: 1.2; }
.dm-side__user small { color: #9b9cc8; font-size: .75rem; }
.dm-side__user .dm-icon-btn { margin-left: auto; color: #c9cbf0; border-color: rgba(255,255,255,.12); background: transparent; }
.dm-side__extra + .dm-side__user, .dm-nav + .dm-side__user { margin-top: auto; }

.dm-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--pmb-blue), var(--pmb-violet)); color: #fff; font-weight: 700; font-size: .85rem; }
.dm-avatar--sm { width: 34px; height: 34px; font-size: .78rem; }
.dm-avatar--lg { width: 72px; height: 72px; font-size: 1.5rem; }

.dm-scrim { display: none; }   /* backdrop for the phone menu only */
.dm-main { min-width: 0; display: flex; flex-direction: column; }
.dm-top { position: sticky; top: var(--dm-bar-h); z-index: 20; display: flex; align-items: center; gap: .8rem; padding: .85rem 1.5rem; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--dm-line); }
.dm-top__title { flex: 1; min-width: 0; }
.dm-top__title h1 { font-size: 1.25rem; line-height: 1.2; }
.dm-top__title p { color: var(--dm-muted); font-size: .82rem; }
.dm-top .dm-top__menu { display: none; }
.dm-bell { position: relative; }
.dm-bell em { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 0 4px; border-radius: 99px; background: var(--dm-err); color: #fff; font-style: normal; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.dm-role-switch { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 10px; border: 1px dashed var(--pmb-violet); background: #f1f1ff; color: var(--pmb-violet); font-weight: 600; font-size: .82rem; cursor: pointer; }

.dm-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--dm-line); background: #fff; color: var(--dm-ink); cursor: pointer; text-decoration: none; }
.dm-icon-btn:hover { border-color: var(--pmb-violet); color: var(--pmb-violet); }

/* guided tour strip */
.dm-tour { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 1.5rem 0; padding: .8rem 1rem; border-radius: 14px; background: linear-gradient(100deg, #eef0ff, #fff1f5); border: 1px solid #dfe1fb; }
.dm-tour__label { font-family: var(--dm-mono); font-size: .75rem; color: var(--pmb-violet); white-space: nowrap; }
.dm-tour__text { flex: 1; min-width: 220px; font-size: .9rem; }
.dm-tour__nav { display: flex; gap: .4rem; flex-wrap: wrap; }

.dm-content { padding: 1.5rem; display: grid; gap: 1.25rem; align-content: start; }

/* ---------- building blocks ---------- */
.dm-grid { display: grid; gap: 1.25rem; }
.dm-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-grid--side { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.dm-card { background: var(--dm-card); border: 1px solid var(--dm-line); border-radius: var(--dm-radius); box-shadow: var(--dm-shadow); min-width: 0; }
.dm-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--dm-line); }
.dm-card__head h2 { font-size: 1.02rem; display: flex; align-items: center; gap: .5rem; }
.dm-card__head h2 i { color: var(--pmb-violet); }
.dm-card__body { padding: 1.2rem; }
.dm-card__body--flush { padding: 0; }

.dm-kpi { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); box-shadow: var(--dm-shadow); }
.dm-kpi__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; color: #fff; font-size: 1.15rem; background: var(--dm-grad); }
.dm-kpi--blue .dm-kpi__icon { background: linear-gradient(135deg, var(--pmb-blue), var(--pmb-violet)); }
.dm-kpi--orange .dm-kpi__icon { background: linear-gradient(135deg, var(--pmb-orange), var(--pmb-crimson)); }
.dm-kpi--red .dm-kpi__icon { background: linear-gradient(135deg, var(--pmb-red), var(--pmb-crimson)); }
.dm-kpi--green .dm-kpi__icon { background: linear-gradient(135deg, #18b47b, #0e8f8a); }
.dm-kpi__label { color: var(--dm-muted); font-size: .82rem; }
.dm-kpi__value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.dm-kpi__note { font-size: .78rem; color: var(--dm-muted); }

.dm-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.dm-badge--ok { background: #e3f7ee; color: #0b7a4f; }
.dm-badge--warn { background: #fff3dc; color: #915c00; }
.dm-badge--err { background: #fde7ec; color: #b3133a; }
.dm-badge--info { background: #e8eeff; color: #2b4fc7; }
.dm-badge--muted { background: #eeeff6; color: #555878; }

.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .62rem 1.05rem; border-radius: 11px; border: 1px solid transparent; background: #eef0fb; color: var(--dm-ink); font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .2s, transform .2s; }
.dm-btn:hover { filter: brightness(.97); }
.dm-btn:active { transform: translateY(1px); }
.dm-btn:disabled { opacity: .45; cursor: not-allowed; }
.dm-btn--primary { background: var(--dm-grad); color: #fff; box-shadow: 0 10px 22px -12px var(--pmb-crimson); }
.dm-btn--primary:hover { filter: brightness(1.06); }
.dm-btn--ghost { background: #fff; border-color: var(--dm-line); }
.dm-btn--soft { background: #e8e9ff; color: var(--pmb-violet); }
.dm-btn--ok { background: #e3f7ee; color: #0b7a4f; }
.dm-btn--danger { background: #fde7ec; color: #b3133a; }
.dm-btn--sm { padding: .42rem .75rem; font-size: .8rem; border-radius: 9px; }
.dm-btn--block { width: 100%; }
.dm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* tables */
.dm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dm-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dm-table th { position: sticky; top: 0; padding: .75rem 1rem; background: #f8f8fd; color: var(--dm-muted); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--dm-line); }
.dm-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--dm-line); vertical-align: middle; }
.dm-table tr:last-child td { border-bottom: 0; }
.dm-table tbody tr:hover { background: #fafaff; }
.dm-table .dm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-table .dm-mono { font-family: var(--dm-mono); font-size: .8rem; }
.dm-table small { display: block; color: var(--dm-muted); font-size: .78rem; }
.dm-row-warn td { background: #fffaf0; }
.dm-row-err td { background: #fff5f7; }

/* forms */
.dm-form { display: grid; gap: 1rem; }
.dm-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dm-field { display: grid; gap: .35rem; }
.dm-field--full { grid-column: 1 / -1; }
.dm-field label { font-size: .82rem; font-weight: 600; color: var(--dm-muted); }
.dm-field input, .dm-field select, .dm-field textarea { width: 100%; padding: .65rem .8rem; border: 1.5px solid var(--dm-line); border-radius: 11px; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.dm-field input:focus, .dm-field select:focus, .dm-field textarea:focus { border-color: var(--pmb-violet); box-shadow: 0 0 0 4px rgba(80,85,241,.12); }
.dm-field textarea { min-height: 90px; resize: vertical; }
.dm-help { font-size: .8rem; color: var(--dm-muted); }
.dm-search { position: relative; }
.dm-search i { position: absolute; left: .8rem; top: 50%; translate: 0 -50%; color: var(--dm-muted); }
.dm-search input { width: 100%; min-width: 220px; padding: .55rem .8rem .55rem 2.2rem; border: 1.5px solid var(--dm-line); border-radius: 11px; outline: none; }
.dm-search input:focus { border-color: var(--pmb-violet); }

.dm-empty { display: grid; justify-items: center; gap: .6rem; padding: 2.2rem 1rem; color: var(--dm-muted); text-align: center; }
.dm-empty i { font-size: 1.8rem; color: #c4c6e6; }

.dm-list { display: grid; }
.dm-list__item { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.2rem; border-bottom: 1px solid var(--dm-line); }
.dm-list__item:last-child { border-bottom: 0; }
.dm-list__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #eef0ff; color: var(--pmb-violet); }
.dm-list__icon--ok { background: #e3f7ee; color: var(--dm-ok); }
.dm-list__icon--warn { background: #fff3dc; color: var(--dm-warn); }
.dm-list__icon--err { background: #fde7ec; color: var(--dm-err); }
.dm-list__main { flex: 1; min-width: 0; }
.dm-list__main strong { display: block; font-size: .92rem; }
.dm-list__main small { color: var(--dm-muted); font-size: .8rem; }

/* bars & meters */
.dm-bars { display: grid; gap: .8rem; }
.dm-bar-row { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: .8rem; font-size: .85rem; }
.dm-bar-row span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-meter { height: 10px; border-radius: 99px; background: #eef0fb; overflow: hidden; }
.dm-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--dm-grad); }
.dm-meter--ok > i { background: linear-gradient(90deg, #18b47b, #0e8f8a); }
.dm-meter--warn > i { background: linear-gradient(90deg, #f6b73c, var(--pmb-orange)); }
.dm-meter--err > i { background: linear-gradient(90deg, var(--pmb-red), var(--pmb-crimson)); }

/* barcode label */
.dm-label { display: grid; justify-items: center; gap: .3rem; padding: .9rem .9rem .7rem; border: 1px dashed #c9cbe6; border-radius: 12px; background: #fff; text-align: center; }
.dm-label strong { font-size: .85rem; line-height: 1.25; }
.dm-label small { color: var(--dm-muted); font-size: .75rem; }
.dm-barcode { width: 100%; max-width: 260px; height: 64px; }
.dm-label__code { font-family: var(--dm-mono); font-size: .8rem; letter-spacing: .12em; }
.dm-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

/* message preview (alerts) */
.dm-msg { border-radius: 14px; padding: .9rem 1rem; font-size: .88rem; line-height: 1.55; white-space: pre-line; }
.dm-msg--wa { background: #e7fbe9; border: 1px solid #c4efc9; }
.dm-msg--sms { background: #eef0ff; border: 1px solid #dadcfb; }
.dm-msg--mail { background: #fff; border: 1px solid var(--dm-line); }
.dm-msg__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; font-weight: 700; font-size: .82rem; white-space: normal; }

/* calendar (attendance) */
.dm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.dm-cal__dow { text-align: center; font-size: .75rem; font-weight: 600; color: var(--dm-muted); }
.dm-cal__day { display: grid; place-items: center; gap: .1rem; min-height: 54px; padding: .35rem; border-radius: 11px; background: #f6f7fc; font-size: .82rem; text-align: center; }
.dm-cal__day b { font-size: .9rem; }
.dm-cal__day small { font-size: .7rem; font-weight: 600; }
.dm-cal__day--P { background: #e3f7ee; color: #0b7a4f; }
.dm-cal__day--A { background: #fde7ec; color: #b3133a; }
.dm-cal__day--L { background: #fff3dc; color: #915c00; }
.dm-cal__day--H { background: #e8eeff; color: #2b4fc7; }
.dm-cal__day--W { background: #f1f1f6; color: #8a8ca8; }
.dm-cal__day--F { background: #fff; border: 1px dashed var(--dm-line); color: #a3a5c0; }
.dm-cal__day--today { outline: 2px solid var(--pmb-violet); outline-offset: 1px; }
.dm-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; color: var(--dm-muted); }
.dm-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.dm-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* check-in widget */
.dm-clock { display: grid; justify-items: center; gap: .6rem; padding: 1.5rem 1rem; text-align: center; }
.dm-clock__time { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-clock__btn { width: 150px; height: 150px; border-radius: 50%; border: 0; background: var(--dm-grad); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 20px 40px -18px var(--pmb-crimson); display: grid; place-items: center; gap: .2rem; }
.dm-clock__btn i { font-size: 2rem; }
.dm-clock__btn--out { background: linear-gradient(135deg, var(--pmb-orange), var(--pmb-crimson)); }
.dm-clock__btn:disabled { background: #cfd1e6; box-shadow: none; cursor: default; }

/* payslip */
.dm-slip { padding: 1.6rem; }
.dm-slip__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--pmb-navy); }
.dm-slip__head h2 { font-size: 1.2rem; }
.dm-slip__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem 1.5rem; padding: 1rem 0; font-size: .86rem; border-bottom: 1px solid var(--dm-line); }
.dm-slip__meta span { color: var(--dm-muted); }
.dm-slip__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1rem 0; }
.dm-slip__cols h3 { font-size: .9rem; margin-bottom: .5rem; color: var(--pmb-violet); }
.dm-slip__line { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px dashed var(--dm-line); font-size: .88rem; }
.dm-slip__line--total { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--dm-ink); margin-top: .3rem; }
.dm-slip__net { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: 1rem 1.2rem; border-radius: 14px; background: linear-gradient(100deg, #eef0ff, #fff1f5); }
.dm-slip__net strong { font-size: 1.5rem; }
.dm-slip__words { font-size: .82rem; color: var(--dm-muted); }

/* profile */
.dm-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.dm-profile h2 { font-size: 1.3rem; }
.dm-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem 1.5rem; }
.dm-dl div span { display: block; color: var(--dm-muted); font-size: .78rem; }
.dm-dl div strong { font-size: .92rem; }

/* steps (payroll run) */
.dm-steps { display: grid; gap: .6rem; }
.dm-step { display: flex; align-items: center; gap: .7rem; font-size: .9rem; color: var(--dm-muted); }
.dm-step i { width: 22px; text-align: center; }
.dm-step.is-done { color: var(--dm-ok); }
.dm-step.is-run { color: var(--pmb-violet); }

/* login */
.dm-login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - var(--dm-bar-h)); }
.dm-login__brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: clamp(2rem, 5vw, 4rem); color: #fff; background: radial-gradient(60% 60% at 0% 0%, rgba(80,85,241,.6), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(234,13,82,.45), transparent 70%), #07042a; }
.dm-login__brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 50%, #000, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 40% 50%, #000, transparent 80%); }
.dm-login__brand > * { position: relative; }
.dm-login__brand h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem); line-height: 1.1; }
.dm-login__brand p { color: #cfd0f3; max-width: 34rem; }
.dm-login__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 34rem; padding: 0; list-style: none; margin: 0; }
.dm-login__features li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: #e6e7ff; }
.dm-login__features i { color: var(--pmb-orange); }
.dm-login__panel { display: grid; place-items: center; padding: 2rem 1.2rem; }
.dm-login__card { width: min(100%, 420px); padding: 2rem; background: #fff; border-radius: 22px; border: 1px solid var(--dm-line); box-shadow: 0 30px 60px -35px rgba(6,0,110,.5); display: grid; gap: 1.1rem; }
.dm-login__card h2 { font-size: 1.4rem; }
.dm-login__note { display: flex; gap: .5rem; padding: .7rem .8rem; border-radius: 11px; background: #fff7e8; color: #7a4f00; font-size: .82rem; }
.dm-roles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.dm-role { display: grid; justify-items: center; gap: .3rem; padding: .9rem .6rem; border: 1.5px solid var(--dm-line); border-radius: 14px; background: #fff; cursor: pointer; font-size: .85rem; font-weight: 600; text-align: center; }
.dm-role i { font-size: 1.3rem; color: var(--pmb-violet); }
.dm-role small { font-weight: 500; color: var(--dm-muted); font-size: .75rem; }
.dm-role.is-active { border-color: var(--pmb-violet); background: #f1f1ff; box-shadow: 0 0 0 3px rgba(80,85,241,.12); }

/* modal */
.dm-modal { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(6,0,110,.6); color: var(--dm-ink); overflow: auto; }
.dm-modal--wide { width: min(860px, calc(100vw - 2rem)); }
.dm-modal::backdrop { background: rgba(6,0,40,.55); backdrop-filter: blur(3px); }
.dm-modal__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: #fff; border-bottom: 1px solid var(--dm-line); }
.dm-modal__head h2 { font-size: 1.1rem; }
.dm-modal__body { padding: 1.2rem; display: grid; gap: 1rem; }

/* toasts */
.dm-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: grid; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); }
.dm-toast { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; background: #0b0838; color: #fff; font-size: .88rem; box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); animation: dm-in .3s ease both; }
.dm-toast i { font-size: 1.05rem; }
.dm-toast--ok i { color: #4be3a4; }
.dm-toast--warn i { color: #ffc35c; }
.dm-toast--err i { color: #ff7a93; }
.dm-toast--info i { color: #8fb2ff; }
.dm-toast.is-out { opacity: 0; translate: 0 8px; transition: .35s; }
@keyframes dm-in { from { opacity: 0; translate: 0 10px; } }

.dm-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.dm-tab { padding: .45rem .9rem; border-radius: 99px; border: 1px solid var(--dm-line); background: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--dm-ink); text-decoration: none; }
.dm-tab.is-active { background: var(--pmb-navy); color: #fff; border-color: var(--pmb-navy); }
.dm-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.dm-muted { color: var(--dm-muted); }
.dm-strong { font-weight: 700; }
.dm-ok { color: var(--dm-ok); } .dm-warn { color: var(--dm-warn); } .dm-err { color: var(--dm-err); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .dm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-grid--side { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .dm-app { grid-template-columns: 1fr; }
  .dm-side { position: fixed; z-index: 60; top: var(--dm-bar-h); left: 0; bottom: 0; height: auto; width: min(290px, 85vw); translate: -100% 0; transition: translate .3s ease; box-shadow: none; }
  .dm-app.is-nav-open .dm-side { translate: 0 0; box-shadow: 20px 0 50px -20px rgba(0,0,0,.5); }
  .dm-scrim { display: none; }
  .dm-app.is-nav-open .dm-scrim { display: block; position: fixed; inset: var(--dm-bar-h) 0 0; z-index: 55; background: rgba(6,0,40,.45); }
  .dm-top { padding: .7rem 1rem; }
  .dm-top .dm-top__menu { display: inline-grid; }
  .dm-tour { margin: .8rem 1rem 0; }
  .dm-content { padding: 1rem; gap: 1rem; }
  .dm-login { grid-template-columns: 1fr; }
  .dm-login__brand { padding: 2rem 1.2rem; }
}

@media (max-width: 640px) {
  body.dm-body { font-size: 14.5px; }
  .dm-bar { gap: .5rem; padding: 0 .6rem; }
  .dm-bar__badge span, .dm-bar__back span, .dm-bar__btn span { display: none; }
  .dm-grid--2, .dm-grid--3, .dm-form__grid { grid-template-columns: 1fr; }
  .dm-grid--kpi { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .dm-kpi { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .9rem; }
  .dm-kpi__icon { width: 38px; height: 38px; font-size: .95rem; border-radius: 11px; }
  .dm-kpi__value { font-size: 1.15rem; }
  .dm-top__title h1 { font-size: 1.05rem; }
  .dm-top__title p { display: none; }
  .dm-role-switch span { display: none; }
  .dm-bar-row { grid-template-columns: 90px 1fr 56px; font-size: .8rem; }
  .dm-slip { padding: 1rem; }
  .dm-slip__cols { grid-template-columns: 1fr; }
  .dm-cal { gap: .25rem; }
  .dm-cal__day { min-height: 44px; padding: .2rem; border-radius: 8px; }
  .dm-cal__day small { display: none; }
  .dm-login__features { grid-template-columns: 1fr; }
  .dm-search input { min-width: 0; }
  .dm-tour__text { min-width: 0; flex-basis: 100%; }
}

/* print: only the payslip (or any .dm-print block) */
@media print {
  body.dm-body { background: #fff; }
  .dm-bar, .dm-side, .dm-top, .dm-tour, .dm-toasts, .dm-noprint { display: none !important; }
  .dm-app { display: block; }
  .dm-content { padding: 0; }
  .dm-content > :not(.dm-print) { display: none !important; }
  .dm-modal { position: static; width: auto; max-height: none; box-shadow: none; }
  .dm-card { box-shadow: none; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   v2 components for the full portfolio (16 demos)
   ========================================================================== */
.dm-roles--3 { grid-template-columns: repeat(3, 1fr); }
.dm-roles--4 { grid-template-columns: repeat(2, 1fr); }
.dm-modal .dm-roles { margin-top: .4rem; }

/* icon tile instead of photos (colour from --h hue) */
.dm-thumb { --s: 52px; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .28); color: #fff; font-size: calc(var(--s) * .4); background: linear-gradient(135deg, hsl(var(--h) 85% 60%), hsl(calc(var(--h) + 40) 80% 45%)); box-shadow: 0 10px 22px -14px hsl(var(--h) 80% 40%); }

/* product / listing cards */
.dm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.dm-pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); box-shadow: var(--dm-shadow); overflow: hidden; transition: translate .25s, box-shadow .25s; }
.dm-pcard:hover { translate: 0 -3px; box-shadow: 0 18px 36px -20px rgba(6,0,110,.45); }
.dm-pcard__media { display: grid; place-items: center; height: 130px; background: linear-gradient(135deg, hsl(var(--h, 250) 90% 94%), hsl(calc(var(--h, 250) + 40) 90% 88%)); color: hsl(var(--h, 250) 70% 45%); font-size: 2.6rem; position: relative; }
.dm-pcard__media .dm-badge { position: absolute; top: .6rem; left: .6rem; }
.dm-pcard__body { display: grid; gap: .35rem; padding: .9rem 1rem 1rem; flex: 1; align-content: start; }
.dm-pcard__body strong { font-size: .95rem; line-height: 1.3; }
.dm-pcard__body small { color: var(--dm-muted); font-size: .8rem; }
.dm-price { font-weight: 700; font-size: 1.05rem; }
.dm-price s { color: var(--dm-muted); font-weight: 500; font-size: .82rem; margin-left: .35rem; }
.dm-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .4rem; flex-wrap: wrap; }

.dm-stars { color: #f5a623; font-size: .8rem; letter-spacing: 1px; }
.dm-qty { display: inline-flex; align-items: center; border: 1px solid var(--dm-line); border-radius: 10px; overflow: hidden; }
.dm-qty button { width: 32px; height: 32px; border: 0; background: #f3f4fb; cursor: pointer; font-weight: 700; }
.dm-qty span { min-width: 34px; text-align: center; font-weight: 600; }

/* status timeline (orders, shipments, applications) */
.dm-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.dm-timeline li { position: relative; display: flex; gap: .8rem; padding-bottom: 1.1rem; color: var(--dm-muted); }
.dm-timeline li::before { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: var(--dm-line); }
.dm-timeline li:last-child::before { display: none; }
.dm-timeline li > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #eef0fb; font-size: .75rem; z-index: 1; }
.dm-timeline li strong { display: block; color: inherit; font-size: .9rem; }
.dm-timeline li small { font-size: .78rem; }
.dm-timeline li.is-done { color: var(--dm-ink); }
.dm-timeline li.is-done > span { background: var(--dm-ok); color: #fff; }
.dm-timeline li.is-done::before { background: var(--dm-ok); }
.dm-timeline li.is-now { color: var(--pmb-violet); }
.dm-timeline li.is-now > span { background: var(--dm-grad); color: #fff; }

/* chat (chatbot, matrimony, tutoring) */
.dm-chat { display: flex; flex-direction: column; height: min(62vh, 560px); }
.dm-chat__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; padding: 1rem; background: #f7f8fd; }
.dm-chat__msg { max-width: 78%; padding: .6rem .85rem; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--dm-line); font-size: .9rem; line-height: 1.45; white-space: pre-line; align-self: flex-start; }
.dm-chat__msg small { display: block; margin-top: .2rem; color: var(--dm-muted); font-size: .7rem; }
.dm-chat__msg--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--dm-grad); color: #fff; border: 0; }
.dm-chat__msg--me small { color: rgba(255,255,255,.75); }
.dm-chat__msg--sys { align-self: center; max-width: 90%; background: #fff7e8; border-color: #f6dfb0; color: #7a4f00; font-size: .8rem; text-align: center; border-radius: 10px; }
.dm-chat__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem 0; background: #f7f8fd; }
.dm-chat__chips button { padding: .35rem .75rem; border-radius: 99px; border: 1px solid #d8daf6; background: #fff; color: var(--pmb-violet); font-size: .8rem; font-weight: 600; cursor: pointer; }
.dm-chat__form { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--dm-line); background: #fff; }
.dm-chat__form input { flex: 1; min-width: 0; padding: .6rem .8rem; border: 1.5px solid var(--dm-line); border-radius: 11px; outline: none; }
.dm-chat__form input:focus { border-color: var(--pmb-violet); }

/* kanban board (CRM, CMS, projects) */
.dm-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .4rem; }
.dm-kcol { background: #eef0f8; border-radius: var(--dm-radius); padding: .7rem; display: grid; gap: .6rem; align-content: start; min-height: 200px; }
.dm-kcol__head { display: flex; justify-content: space-between; align-items: center; padding: .2rem .3rem; font-weight: 700; font-size: .88rem; }
.dm-kcol__head small { color: var(--dm-muted); font-weight: 600; }
.dm-kcard { background: #fff; border: 1px solid var(--dm-line); border-radius: 12px; padding: .75rem .8rem; display: grid; gap: .35rem; box-shadow: 0 6px 14px -12px rgba(6,0,110,.5); }
.dm-kcard strong { font-size: .9rem; line-height: 1.3; }
.dm-kcard small { color: var(--dm-muted); font-size: .78rem; }
.dm-kcard__foot { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-top: .2rem; flex-wrap: wrap; }

/* bus seat map */
.dm-seats { display: grid; grid-template-columns: repeat(5, 40px); gap: .45rem; justify-content: center; padding: 1rem; background: #f7f8fd; border-radius: 14px; }
.dm-seat { height: 40px; border-radius: 9px 9px 5px 5px; border: 1.5px solid #c9cbe6; background: #fff; font-size: .72rem; font-weight: 600; cursor: pointer; color: var(--dm-ink); padding: 0; }
.dm-seat--aisle { visibility: hidden; }
.dm-seat--taken { background: #e1e2ee; border-color: #e1e2ee; color: #9a9cb6; cursor: not-allowed; }
.dm-seat--lady { border-color: #f3a6c0; }
.dm-seat.is-picked { background: var(--dm-grad); border-color: transparent; color: #fff; }

/* tickets */
.dm-ticket { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.2rem; border: 1.5px dashed #c9cbe6; border-radius: 16px; background: #fff; }
.dm-ticket h3 { font-size: 1.05rem; }
.dm-ticket__route { display: flex; align-items: center; gap: .8rem; font-weight: 700; font-size: 1.1rem; margin: .4rem 0; flex-wrap: wrap; }
.dm-ticket__route i { color: var(--pmb-violet); }
.dm-ticket__qr { display: grid; grid-template-columns: repeat(7, 9px); grid-auto-rows: 9px; gap: 1px; align-self: center; }
.dm-ticket__qr i { background: #0b0a2a; border-radius: 1px; }
.dm-ticket__qr i.o { background: transparent; }

/* misc */
.dm-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.dm-pill { padding: .3rem .7rem; border-radius: 99px; background: #eef0fb; font-size: .78rem; font-weight: 600; color: var(--dm-ink); }
.dm-filterbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.dm-filterbar select, .dm-filterbar input { padding: .5rem .7rem; border: 1.5px solid var(--dm-line); border-radius: 10px; background: #fff; min-width: 0; }
.dm-match { --p: 50; display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--pmb-crimson) calc(var(--p) * 1%), #eceefa 0); font-weight: 700; font-size: .78rem; position: relative; }
.dm-match::after { content: attr(data-p) "%"; position: absolute; inset: 5px; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.dm-note { padding: .8rem 1rem; border-radius: 12px; background: #f1f1ff; color: #2d2f80; font-size: .86rem; }
.dm-note i { color: var(--pmb-violet); margin-right: .35rem; }
.dm-summary { display: grid; gap: .45rem; }
.dm-summary div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.dm-summary .dm-summary__total { padding-top: .6rem; border-top: 1px solid var(--dm-line); font-weight: 700; font-size: 1.05rem; }
.dm-editor { width: 100%; min-height: 220px; padding: 1rem; border: 1.5px solid var(--dm-line); border-radius: 12px; font: inherit; line-height: 1.6; resize: vertical; }
.dm-preview { padding: 1.2rem 1.4rem; border: 1px solid var(--dm-line); border-radius: 14px; background: #fff; }
.dm-preview h1 { font-size: 1.6rem; margin-bottom: .6rem; }
.dm-preview p { margin-bottom: .7rem; line-height: 1.7; }

@media (max-width: 640px) {
  .dm-roles--3 { gap: .4rem; }
  .dm-roles--3 .dm-role { padding: .7rem .3rem; font-size: .78rem; }
  .dm-cards { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .dm-pcard__media { height: 96px; font-size: 2rem; }
  .dm-pcard__body { padding: .7rem; }
  .dm-chat__msg { max-width: 88%; }
  .dm-ticket { grid-template-columns: 1fr; }
  .dm-seats { grid-template-columns: repeat(5, 34px); }
  .dm-seat { height: 34px; }
}

/* food ordering: veg mark, check toggle, live tracking strip */
.dm-veg { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid #0a8a4a; border-radius: 3px; vertical-align: -2px; }
.dm-veg::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0a8a4a; }
.dm-veg--non { border-color: #b3261e; }
.dm-veg--non::after { background: #b3261e; border-radius: 0; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #b3261e; background: none; }
.dm-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; cursor: pointer; }
.dm-check input { width: 16px; height: 16px; accent-color: var(--pmb-violet, #5055F1); }
.dm-map { position: relative; height: 120px; border-radius: 14px; background: linear-gradient(135deg, #eef5ff, #f4efff); background-image: linear-gradient(90deg, rgba(80,85,241,.06) 1px, transparent 1px), linear-gradient(rgba(80,85,241,.06) 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.dm-map__road { position: absolute; left: 8%; right: 8%; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: #dfe2f2; }
.dm-map__road i { display: block; height: 100%; border-radius: inherit; background: var(--dm-grad); transition: width .6s; }
.dm-map__pin { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--dm-shadow); color: var(--pmb-navy, #06006E); }
.dm-map__pin--a { left: 3%; } .dm-map__pin--b { right: 3%; color: #EA0D52; }
.dm-map__rider { position: absolute; top: 22%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dm-grad); color: #fff; font-size: .85rem; transition: left .6s; }
.dm-mini { width: 58px; padding: .35rem .4rem; border: 1.5px solid var(--dm-line); border-radius: 8px; text-align: center; font: inherit; }
.dm-mini:focus { outline: none; border-color: var(--pmb-violet, #5055F1); }
/* tutoring: lesson player + quiz options */
.dm-player { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; background: linear-gradient(135deg, #06006E, #5055F1 60%, #EA0D52); color: #fff; text-align: center; padding: 1rem; }
.dm-player i { font-size: 3rem; opacity: .9; }
.dm-opt { display: flex; gap: .6rem; align-items: center; padding: .65rem .8rem; border: 1.5px solid var(--dm-line); border-radius: 11px; cursor: pointer; }
.dm-opt:has(input:checked) { border-color: var(--pmb-violet, #5055F1); background: #f3f3ff; }
.dm-opt--ok { border-color: #0a8a4a; background: #e3f7ee; }
.dm-opt--bad { border-color: #b3133a; background: #fde7ec; }

a.dm-pcard, a.dm-pcard:hover { text-decoration: none; color: inherit; }