/* ============================================================================
   VRYNO HRMS
   ============================================================================
   The HRMS card vocabulary. Everything from `.hp-pill` to `.hp-seg` was
   authored inline in hrms/hrms-dashboard.html, in a 4.6KB
   <style id="hrms-personal-widgets"> block -- which meant the module's own
   design language was reachable from exactly one page. The new HRMS pages need
   the same tiles, the same icon chips and the same empty states, so the block
   moved here verbatim and the dashboard links this file instead.

   Everything below the LIFTED marker is unchanged from that block, so the
   dashboard renders identically. Everything below the NEW marker is what the
   pages added in this pass need: the weekly timesheet grid, the hours summary
   strip and the announcement feed row.
============================================================================ */

/* ==========================================================================
   LIFTED verbatim from hrms/hrms-dashboard.html
   ========================================================================== */

.hp-pill {
      display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgb(255 255 255 / 30%);
    color: #ffffff;
}

.hp-panel {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 16px;
    padding: 14px 16px;
}

.hp-clock {
    min-width: 56px;
    padding: 5px 8px;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

.hp-clock b {
    display: block;
    font-size: 19px;
    line-height: 1.15;
    color: var(--heading-color, #1f2937);
    font-variant-numeric: tabular-nums;
}

.hp-clock span {
    font-size: 9px;
    letter-spacing: .09em;
    color: var(--gray-400, #868787);
}

/* Week strip — one soft tile per day, same language as the KPI cards */
.hp-tile {
    border-radius: 14px;
    padding: 12px 13px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.hp-tile .d {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--heading-color, #1f2937);
}

.hp-tile .dt {
    font-size: 11px;
    color: var(--gray-500, #707070);
    margin-bottom: 10px;
}

.hp-tile .st {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
}

.hp-mark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.hp-today {
    box-shadow: 0 0 0 2px var(--info) inset;
}

.hp-ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.hp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.hp-row+.hp-row {
    border-top: 1px solid var(--border-color, #E2E8F0);
}

.hp-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    text-decoration: none;
    border-radius: 8px;
}

.hp-file:hover {
    background: #f7f9fd;
}

.hp-file span.n {
    flex: 1 1 auto;
    font-size: 13.5px;
    color: var(--heading-color, #1f2937);
}

.hp-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.hp-empty {
    padding: 30px 12px;
    text-align: center;
}

.hp-empty i.big {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--light, #f1f3f9);
    color: var(--gray-400, #868787);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 10px;
}

.hp-seg {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: #eef1f7;
}

.hp-seg button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600, #4b5563);
}

.hp-seg button.active {
    background: #fff;
    color: var(--heading-color, #1f2937);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
}

[data-bs-theme="dark"] .hp-file:hover,
html[data-theme="dark"] .hp-file:hover {
    background: rgba(255, 255, 255, .05);
}

[data-bs-theme="dark"] .hp-clock,
html[data-theme="dark"] .hp-clock {
    background: rgba(255, 255, 255, .1);
}
    

/* ==========================================================================
   NEW
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THE WEEK GRID  --  hrms/timesheets.html
   Seven columns on a desktop, two on a phone. Each day is a cell you type
   hours into, so the grid is the entry surface, not a read-only summary.
   --------------------------------------------------------------------------- */
.vh-week {
    display: grid;
    grid-template-columns: minmax(190px, 1.4fr) repeat(7, minmax(72px, 1fr)) minmax(78px, .8fr);
    gap: 1px;
    background: var(--border-color, #E2E8F0);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 12px;
    overflow: hidden;
    min-width: 860px;
}

.vh-week > div {
    background: var(--card-bg, #fff);
    padding: 9px 10px;
    font-size: 13px;
}

.vh-week .vh-h {
    background: #f7f9fd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gray-500, #707070);
}

/* A weekend column is dimmed rather than disabled: people do book hours on a
   Saturday, and a cell you cannot type into is the wrong way to say "unusual". */
.vh-week .vh-we {
    background: #fbfcfe;
}

.vh-week .vh-tot {
    font-weight: 700;
    color: var(--heading-color, #1f2937);
    font-variant-numeric: tabular-nums;
}

.vh-week input {
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--heading-color, #1f2937);
    padding: 0;
}

.vh-week input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.vh-proj {
    font-weight: 600;
    color: var(--heading-color, #1f2937);
}

.vh-task {
    font-size: 11.5px;
    color: var(--gray-500, #707070);
}

/* ---------------------------------------------------------------------------
   THE HOURS SUMMARY STRIP
   Worked, expected, overtime and what is still unsubmitted -- the four numbers
   a timesheet is actually approved or queried on.
   --------------------------------------------------------------------------- */
.vh-sum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
}

.vh-sum-cell {
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--card-bg, #fff);
}

.vh-sum-cell .l {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gray-500, #707070);
    display: block;
    margin-bottom: 7px;
}

.vh-sum-cell .v {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--heading-color, #1f2937);
    font-variant-numeric: tabular-nums;
}

.vh-sum-cell .s {
    font-size: 11.5px;
    color: var(--gray-500, #707070);
}

/* A 6px bar rather than a number alone: "34h of 40h" is read faster as a
   length than as a fraction. */
.vh-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--light, #edeeee);
    overflow: hidden;
    margin-top: 7px;
}

.vh-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
}

/* ---------------------------------------------------------------------------
   THE ANNOUNCEMENT ROW  --  hrms/hrms-announcements.html and the dashboard card
   --------------------------------------------------------------------------- */
.vh-ann {
    display: flex;
    gap: 10px;
    padding: 11px 4px;
    text-decoration: none;
    border-radius: 8px;
}

/* .vh-ann + .vh-ann {
    border-top: 1px solid var(--border-color, #E2E8F0);
} */

.vh-ann:hover {
    background: #f7f9fd;
}

.vh-ann .t {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--heading-color, #1f2937);
    display: block;
    margin-bottom: 1px;
}

.vh-ann .m {
    font-size: 11.5px;
    color: var(--gray-500, #707070);
}

/* Pinned is a left edge, not a badge: a badge competes with the category chip
   already on the row. */
.vh-ann.pinned {
    /* box-shadow: inset 3px 0 0 0 var(--warning); */
    padding-left: 10px;
    margin-bottom: 10px;
    background: #fffdef;
    border: 1px solid #f9f0ba;

}

/* ---------------------------------------------------------------------------
   THE FILLING CARD
   The HRMS dashboard's third row held 1721px of cards in its wide column and
   1402px in its narrow one, so the narrow column stopped 320px short and left
   a hole. Both columns are now flex columns and the last card in each carries
   .hp-fill, so whatever the content does the row closes.

   The card's body takes the slack rather than the card's padding, which keeps
   its header and its list at the top and any footer at the bottom -- growth
   that reads as designed instead of as leftover space.
   --------------------------------------------------------------------------- */
.hp-fill {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.hp-fill > .card-body {
    flex: 1 1 auto;
}

/* A card that is not the filler keeps the height its content asks for; without
   this, flex-shrink would let a tall neighbour squeeze it. */
.col-xl-8.d-flex.flex-column > .card:not(.hp-fill),
.col-xl-4.d-flex.flex-column > .card:not(.hp-fill) {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   TWO CELL SHAPES THE NEW MODULES NEEDED
   A reference -- an asset tag, a policy code, a ticket number -- is read
   character by character rather than as a word, so it gets the monospaced
   treatment and tabular figures. And a completion figure in a list column reads
   faster as a length than as a percentage, but only if the bar and its number
   stay on one line.
   --------------------------------------------------------------------------- */
.vh-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    color: var(--gray-600, #5A5B5B);
    background: var(--light, #edeeee);
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
}

.vh-inlinebar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.vh-inlinebar .vh-bar {
    margin-top: 0;
    flex: 0 0 auto;
}

[data-bs-theme="dark"] .vh-code {
    background: rgba(255, 255, 255, .08);
    color: var(--dtf-text, #a9b1c7);
}

/* ---------------------------------------------------------------------------
   THE ORG TREE  --  hrms/org-chart.html
   Nested lists, not a canvas drawing: the hierarchy is already a tree in the
   markup, so the connectors are drawn with borders on ::before/::after and the
   whole thing stays selectable, searchable and readable by a screen reader.
   A canvas would have looked the same and been none of those.
   --------------------------------------------------------------------------- */
.vh-org,
.vh-org ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vh-org ul {
    margin-left: 26px;
    padding-left: 20px;
    border-left: 1px solid var(--border-color, #E2E8F0);
}

.vh-org li {
    position: relative;
    padding: 5px 0;
}

/* The elbow from the vertical rail to each node. */
.vh-org ul > li::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 26px;
    width: 20px;
    height: 1px;
    background: var(--border-color, #E2E8F0);
}

/* The last child stops the rail at its own elbow instead of running past it. */
.vh-org ul > li:last-child::after {
    content: "";
    position: absolute;
    left: -21px;
    top: 27px;
    bottom: 0;
    width: 1px;
    background: var(--card-bg, #fff);
}

.vh-node {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 12px;
    background: var(--card-bg, #fff);
    text-decoration: none;
    max-width: 100%;
}

.vh-node:hover {
    border-color: var(--primary);
    background: var(--primary-transparent);
}

.vh-node .av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    flex: 0 0 auto;
}

.vh-node .n {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--heading-color, #1f2937);
    line-height: 1.25;
}

.vh-node .r {
    display: block;
    font-size: 11.5px;
    color: var(--gray-500, #707070);
}

/* A vacancy is a real position with nobody in it, so it is a node rather than
   an absence -- dashed, because the shape is there and the person is not. */
.vh-node.vacant {
    border-style: dashed;
    border-color: var(--warning);
}

.vh-node.vacant .av {
    background: var(--warning-transparent) !important;
    color: var(--warning);
}

.vh-node .cnt {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--light, #edeeee);
    color: var(--gray-600, #5A5B5B);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   THE BALANCE METER  --  hrms/leave-balances.html
   Entitlement splits four ways -- taken, pending, remaining, expiring -- and
   the four have to add up to the whole, so they share one bar rather than
   getting a bar each.
   --------------------------------------------------------------------------- */
.vh-split {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--light, #edeeee);
    min-width: 120px;
    margin-top: 10px;
}

.vh-split > span {
    display: block;
    height: 100%;
}

.vh-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--gray-600, #5A5B5B);
    white-space: nowrap;
}

.vh-legend i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-block;
    flex: 0 0 auto;
}

[data-bs-theme="dark"] .vh-node {
    background: var(--dtf-surface-2, #13132e);
    border-color: var(--dtf-border, #26264f);
}

[data-bs-theme="dark"] .vh-node .n {
    color: var(--dtf-heading, #e8eaff);
}

[data-bs-theme="dark"] .vh-org ul {
    border-left-color: var(--dtf-border, #26264f);
}

[data-bs-theme="dark"] .vh-org ul > li::before {
    background: var(--dtf-border, #26264f);
}

[data-bs-theme="dark"] .vh-org ul > li:last-child::after {
    background: var(--dtf-surface, #0d0d26);
}

[data-bs-theme="dark"] .vh-node .cnt,
[data-bs-theme="dark"] .vh-split {
    background: rgba(255, 255, 255, .08);
    color: var(--dtf-text, #a9b1c7);
}

/* ---------------------------------------------------------------------------
   DARK
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] .vh-week {
    background: var(--dtf-border, #26264f);
    border-color: var(--dtf-border, #26264f);
}

[data-bs-theme="dark"] .vh-week > div {
    background: var(--dtf-surface-2, #13132e);
}

[data-bs-theme="dark"] .vh-week .vh-h,
[data-bs-theme="dark"] .vh-week .vh-we {
    background: var(--dtf-surface, #0d0d26);
}

[data-bs-theme="dark"] .vh-week .vh-tot,
[data-bs-theme="dark"] .vh-week input,
[data-bs-theme="dark"] .vh-proj,
[data-bs-theme="dark"] .vh-sum-cell .v,
[data-bs-theme="dark"] .vh-ann .t {
    color: var(--dtf-heading, #e8eaff);
}

[data-bs-theme="dark"] .vh-sum-cell {
    background: var(--dtf-surface-2, #13132e);
    border-color: var(--dtf-border, #26264f);
}

[data-bs-theme="dark"] .vh-bar {
    background: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .vh-ann:hover {
    background: rgba(255, 255, 255, .05);
}

[data-bs-theme="dark"] .hp-seg {
    background: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .hp-seg button.active {
    background: var(--dtf-surface-2, #13132e);
    color: var(--dtf-heading, #e8eaff);
}

@media (max-width: 767.98px) {
    .vh-week {
        min-width: 720px;
    }
}