/* ==========================================================================
   HRMS bento design — ported from the approved preview (port 8570).
   EVERY selector is scoped under .bento. The source defined .card, .row and
   .btn, which collide with Bootstrap. Unscoped, its .row (flex, 11px gap,
   10px padding) would have broken every Bootstrap grid across all 58 pages.
   Design tokens moved from :root onto .bento for the same reason.
   ========================================================================== */
/* Reference design only — used by theme-preview.html to show the approved
   visual direction. NOT part of the application shell; real pages use
   hrms.css. Kept separate so the design system stays single-source. */
/* ==========================================================================
   Globosoft HRMS — "soft dashboard" theme
   --------------------------------------------------------------------------
   Modelled on the reference layout: pill top-nav, generous card radii, a right
   rail, tinted icon chips, one dark feature card per region.

   Colour mapping from the reference onto the Globosoft brand:
       reference green  #4CAF7D  ->  --accent      #462A8D
       reference teal   #1E4A5F  ->  --ink-card    #2A1B54
   The structure is copied; the palette stays yours. Swapping to the
   reference's green is a two-line change in :root.
   ========================================================================== */

.bento {
  --bg:         #EFEFF1;
  --surface:    #FFFFFF;
  --surface-2:  #F6F6F8;
  --border:     #EAEAEE;

  --ink:        #1B1630;
  --ink-2:      #4A4460;
  --muted:      #8A85A0;

  --accent:      #462A8D;
  --accent-hover:#38216F;
  --accent-soft: #ECE9F7;
  --accent-mid:  #8572BF;

  --ink-card:   #2A1B54;   /* the dark feature card */
  --ink-card-2: #3A2570;

  --ok:   #12A474;  --ok-soft:   #E6F6EF;
  --warn: #C77700;  --warn-soft: #FDF3E1;
  --err:  #E5484D;  --err-soft:  #FDECEC;

  --r-card: 22px;
  --r-med:  14px;
  --r-sm:   10px;
  --r-pill: 999px;

  --sh-card: 0 1px 2px rgba(27,22,48,.04);
  --sh-pop:  0 12px 30px rgba(27,22,48,.10);

  --rail-w: 330px;
}

.bento { box-sizing: border-box; }

.bento {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.bento .num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Frame — the whole app sits on a rounded white sheet, as in the reference
   ========================================================================== */
.bento .sheet {
  max-width: 1320px; margin: 22px auto; min-height: calc(100vh - 44px);
  background: var(--surface); border-radius: 26px; overflow: hidden;
  display: grid; grid-template-columns: 1fr var(--rail-w);
  box-shadow: var(--sh-pop);
}
.bento .left { padding: 22px 26px 34px; min-width: 0; }
.bento .rail { background: var(--surface-2); padding: 22px; border-left: 1px solid var(--border); }

/* ---- pill top nav -------------------------------------------------------- */
.bento .topnav { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.bento .logo {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; display: grid; place-items: center;
}
.bento .pills { display: flex; gap: 6px; }
.bento .pills a {
  height: 38px; padding: 0 18px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  background: var(--surface-2);
  transition: background .16s ease, color .16s ease;
}
.bento .pills a:hover { background: var(--accent-soft); color: var(--accent); }
.bento .pills a.on { background: var(--accent); color: #fff; }

.bento .crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.bento .crumbs b { color: var(--ink-2); font-weight: 500; }
.bento .hello { font-size: 30px; font-weight: 600; letter-spacing: -.5px; margin: 0 0 22px; }

.bento .head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ---- buttons ------------------------------------------------------------- */
.bento .btn {
  height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.bento .btn:hover { background: var(--surface-2); }
.bento .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.bento .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.bento .btn-sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
.bento .btn svg { width: 16px; height: 16px; }

.bento .icon-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: background .16s ease;
}
.bento .icon-btn:hover { background: var(--surface-2); }

.bento .search {
  height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px;
  flex: 1; min-width: 0; cursor: pointer;
}

/* ---- cards --------------------------------------------------------------- */
.bento .card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 18px 20px;
  box-shadow: var(--sh-card);
}
.bento .card.tight { padding: 16px; }
.bento .card-title { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.bento .card-h { font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin: 0 0 14px; }

.bento .card-dark {
  background: linear-gradient(160deg, var(--ink-card-2) 0%, var(--ink-card) 100%);
  color: #fff; border: 0;
}
.bento .card-dark .card-title { color: rgba(255,255,255,.62); }

/* tinted circular icon chip — the reference's signature detail */
.bento .chip-ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.bento .chip-ic.on-dark { background: rgba(255,255,255,.14); color: #fff; }
.bento .chip-ic.ok { background: var(--ok-soft);   color: var(--ok); }
.bento .chip-ic.warn { background: var(--warn-soft); color: var(--warn); }

/* ---- layout grid --------------------------------------------------------- */
.bento .g { display: grid; gap: 14px; }
.bento .g-main { grid-template-columns: 260px 1fr; }
.bento .g-3 { grid-template-columns: repeat(3, 1fr); }
.bento .g-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1150px) { .g-main, .g-3, .g-2 { grid-template-columns: 1fr; } }

/* ---- profile card -------------------------------------------------------- */
.bento .profile { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 250px;
           background: var(--accent-soft); display: flex; align-items: flex-end; }
.bento .profile .ph { position: absolute; inset: 0; display: grid; place-items: center; }
.bento .profile .meta {
  position: relative; margin: 12px; padding: 12px 14px; border-radius: var(--r-med);
  background: rgba(255,255,255,.82); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 10px; width: calc(100% - 24px);
}
.bento .profile .meta .n { font-weight: 600; font-size: 14.5px; }
.bento .profile .meta .r { font-size: 12px; color: var(--muted); }
.bento .badge-float {
  position: absolute; left: 12px; top: 12px;
  background: var(--ink-card); color: #fff; font-size: 11.5px; font-weight: 500;
  padding: 6px 11px; border-radius: var(--r-pill);
}

/* ---- big metric ---------------------------------------------------------- */
.bento .big { font-size: 40px; font-weight: 600; letter-spacing: -1px; line-height: 1; }
.bento .delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--ok-soft); color: var(--ok);
}
.bento .delta.down { background: var(--err-soft); color: var(--err); }
.bento .delta.on-dark { background: rgba(255,255,255,.16); color: #fff; }

/* dot-matrix ------------------------------------------------------------- */
.bento .dots { display: grid; grid-auto-flow: column; gap: 5px; align-items: end; }
.bento .dots .col { display: grid; gap: 5px; }
.bento .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; }
.bento .legend { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); margin-top: 12px; }
.bento .legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---- rail list ----------------------------------------------------------- */
.bento .rail-h { font-size: 12.5px; color: var(--muted); }
.bento .rail-t { font-size: 20px; font-weight: 600; letter-spacing: -.3px; margin: 2px 0 16px; }
.bento .row {
  display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: var(--r-med);
  transition: background .16s ease;
}
.bento .row:hover { background: var(--surface); }
.bento .row.on { background: var(--surface); box-shadow: var(--sh-card); }
.bento .row .av {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 600;
}
.bento .row .n { font-size: 13.5px; font-weight: 500; }
.bento .row .s { font-size: 11.5px; color: var(--muted); }
.bento .state {
  margin-left: auto; font-size: 11.5px; font-weight: 500;
  padding: 5px 11px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); color: var(--muted); background: var(--surface);
}
.bento .state i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.bento .state.ok { color: var(--ok);   border-color: #CBEBDD; }
.bento .state.warn { color: var(--warn); border-color: #F5E2BE; }
.bento .state.err { color: var(--err);  border-color: #F7CFD0; }

/* ---- misc ---------------------------------------------------------------- */
.bento .bars { display: flex; align-items: flex-end; gap: 4px; height: 54px; }
.bento .bars i { flex: 1; border-radius: 3px; background: var(--accent); display: block; }
.bento .bars i.off { background: var(--border); }

.bento .mini { font-size: 12px; color: var(--muted); }
.bento .sep { height: 1px; background: var(--border); margin: 14px 0; }
.bento .spacer { margin-left: auto; }

.bento *::-webkit-scrollbar { width: 9px; height: 9px; }
.bento *::-webkit-scrollbar-thumb { background: #DCDCE3; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

@media (max-width: 1000px) {
  .bento .sheet { grid-template-columns: 1fr; margin: 0; border-radius: 0; min-height: 100vh; }
  .bento .rail { border-left: 0; border-top: 1px solid var(--border); }
  .bento .pills { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* NOTE: the source already styles the dot matrix at a fixed 7px via
   `.dots i`. An earlier attempt here re-declared .dots with flex plus
   width:100%/aspect-ratio, which made every dot fill its column — huge
   circles instead of a matrix. Those rules are deliberately NOT here;
   the JS emits the source's own `.col > i` markup instead. */

/* The dashboard sits inside .app-content, not the preview's .sheet, so the
   grid needs to stand on its own here. */
.bento .g            { display: grid; gap: 14px; }
.bento .g-main       { grid-template-columns: 280px 1fr; }
.bento .g-3          { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) { .bento .g-main { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .bento .g-3 { grid-template-columns: 1fr; }
                             .bento .card[style*="230px"] { grid-template-columns: 1fr !important; } }

/* ══════════════════════════════════════════════════════════════
   Sign in — in the bento language.
   The signature of this design is a white sheet with a large radius
   floating on the soft grey ground, so the login becomes exactly that:
   one rounded sheet holding the form and the feature panel, rather than
   two halves running edge to edge. Tokens only — no new colours.
   ══════════════════════════════════════════════════════════════ */
html.t .signin.bento {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 34px 24px;
  background: var(--bg);
}
html.t .signin.bento .signin-sheet {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; max-width: 1020px;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-pop);
}
html.t .signin.bento .signin__form { padding: 52px 54px; display: flex; flex-direction: column; justify-content: center; }
html.t .signin.bento .signin__inner { max-width: 350px; margin: 0; width: 100%; }
html.t .signin.bento .signin__mark { height: 30px; margin-bottom: 40px; }
html.t .signin.bento .signin__title { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); margin: 0 0 6px; }
html.t .signin.bento .signin__meta { font-size: 13.5px; color: var(--muted); margin: 0 0 28px; }
html.t .signin.bento .signin__label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 7px; }
html.t .signin.bento .signin__hint { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
html.t .signin.bento .signin__link { font-size: 12.5px; color: var(--accent); font-weight: 500; text-decoration: none; }
html.t .signin.bento .signin__input {
  height: 46px; border-radius: var(--r-med); border: 1px solid var(--border);
  background: var(--surface); font-size: 14px; color: var(--ink); padding: 0 14px; width: 100%;
}
html.t .signin.bento .signin__input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
html.t .signin.bento .signin__submit {
  height: 46px; width: 100%; border: 0; cursor: pointer;
  border-radius: var(--r-pill);                    /* pill, as everywhere else */
  background: var(--accent); color: #fff;
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  transition: background .16s ease, transform .16s ease;
}
html.t .signin.bento .signin__submit:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
html.t .signin.bento .signin__check { font-size: 13px; color: var(--ink-2); }
html.t .signin.bento .signin__foot { font-size: 11.5px; color: var(--muted); margin-top: 26px; }
html.t .signin.bento .signin__foot a { color: var(--ink-2); text-decoration: none; }

/* Right half — the dark feature panel, same ink as the dashboard cards */
html.t .signin.bento .signin__show {
  position: relative; overflow: hidden;
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 11px;
  background: var(--ink-card);
}
html.t .signin.bento .signin__show::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 80% at 85% 8%, rgba(148,126,214,.42), transparent 60%);
}
html.t .signin.bento .signin__showhead {
  position: relative; z-index: 1; margin: 0 0 10px; max-width: 320px;
  font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; color: #fff;
}
html.t .signin.bento .signin__showcard {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-med);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
}
html.t .signin.bento .signin__showicon {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(255,255,255,.13); color: #fff; font-size: 15px;
}
html.t .signin.bento .signin__showtitle { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: #fff; }
html.t .signin.bento .signin__showtext { margin: 0; font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,.72); }

@media (max-width: 900px) {
  html.t .signin.bento .signin-sheet { grid-template-columns: 1fr; max-width: 460px; }
  html.t .signin.bento .signin__show { display: none; }
  html.t .signin.bento .signin__form { padding: 40px 32px; }
}
@media (max-width: 480px) {
  html.t .signin.bento { padding: 0; }
  html.t .signin.bento .signin-sheet { border-radius: 0; min-height: 100vh; box-shadow: none; }
  html.t .signin.bento .signin__form { padding: 32px 22px; }
}

/* ══════════════════════════════════════════════════════════════
   Zero-data legibility.
   With no attendance recorded, every dot fell back to --surface-2
   (#F6F6F8) on a white card — the grid was present but invisible, so
   the card read as blank space. The off state now has real contrast,
   and a card with no data at all says so instead of showing nothing.
   ══════════════════════════════════════════════════════════════ */
.bento .dots i { background: #E4E3EC; transition: background .2s ease, transform .2s ease; }
.bento .dots .col:hover i { transform: scale(1.25); }

/* A soft breathing pulse only while the whole week is empty, so the
   card looks intentionally idle rather than broken. */
.bento .dots.is-empty i { animation: dotIdle 2.6s ease-in-out infinite; }
.bento .dots.is-empty .col:nth-child(2) i { animation-delay: .18s; }
.bento .dots.is-empty .col:nth-child(3) i { animation-delay: .36s; }
.bento .dots.is-empty .col:nth-child(4) i { animation-delay: .54s; }
.bento .dots.is-empty .col:nth-child(5) i { animation-delay: .72s; }
.bento .dots.is-empty .col:nth-child(6) i { animation-delay: .90s; }
.bento .dots.is-empty .col:nth-child(7) i { animation-delay: 1.08s; }
@keyframes dotIdle { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.bento .nodata {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 9px 12px;
  border-radius: var(--r-med);
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 500;
}
.bento .nodata svg { flex: none; }

/* Profile card — it was mostly empty lavender. A soft brand wash plus
   the concentric G-arcs give it something to look at. */
.bento .profile { position: relative; overflow: hidden; }
.bento .profile::after {
  content: ""; position: absolute; right: -110px; bottom: -120px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 1.5px solid rgba(70,42,141,.10);
  box-shadow: 0 0 0 30px rgba(70,42,141,.045), 0 0 0 62px rgba(70,42,141,.03);
  pointer-events: none;
}
.bento .profile .ph svg { position: relative; z-index: 1; }

/* Cards lift slightly on hover so the grid feels alive */
.bento .card { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease; }
.bento .card:hover { transform: translateY(-2px); box-shadow: var(--sh-pop); }

@media (prefers-reduced-motion: reduce) {
  .bento .dots.is-empty i { animation: none; opacity: .7; }
  .bento .card:hover { transform: none; }
  .bento .dots .col:hover i { transform: none; }
}