/* ==========================================================================
   Live calendar & clock icons (see public/js/live-icons.js)
   The icon's text colour (currentColor) tints the calendar band and the clock hands,
   so each card keeps its own pastel identity.
   ========================================================================== */

/* ---------- Calendar page ---------- */
.live-cal-ico {
    position: relative;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 1.12em;
    height: 1.22em;
    margin-top: .12em;
    border-radius: .26em;
    background: linear-gradient(180deg, #ffffff 0%, #f7f5ff 100%);
    box-shadow:
        0 .12em .28em -.06em rgba(30, 27, 75, .28),
        0 0 0 .055em color-mix(in srgb, currentColor 35%, transparent),
        inset 0 -.08em 0 rgba(30, 27, 75, .06);
    overflow: visible;
    vertical-align: -.22em;
    line-height: 1;
    font-style: normal;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    transform-origin: 50% 0;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
.live-cal-ico::before { content: none !important; }

/* Coloured month band (gradient from the icon colour) */
.live-cal-ico .lc-top {
    display: block;
    width: 100%;
    border-radius: .26em .26em 0 0;
    background: linear-gradient(135deg, color-mix(in srgb, currentColor 70%, #ffffff), currentColor);
    font-size: .3em;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
    padding: .32em 0 .14em;
    -webkit-text-fill-color: #ffffff;
    color: inherit;
}
.live-cal-ico .lc-day {
    font-size: .6em;
    font-weight: 900;
    margin-top: .06em;
    color: #1e1b4b;
    -webkit-text-fill-color: #1e1b4b;
    letter-spacing: -.02em;
}
/* Two binder rings on top of the page */
.live-cal-ico .lc-rings {
    position: absolute;
    top: -.09em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 .24em;
    pointer-events: none;
    z-index: 1;
}
.live-cal-ico .lc-rings i {
    display: block;
    width: .1em;
    height: .2em;
    border-radius: .1em;
    background: linear-gradient(180deg, #ffffff, #c7c2e8);
    box-shadow: 0 .02em .03em rgba(30, 27, 75, .35);
    font-style: normal;
}
.live-cal-ico .lc-rings i::before { content: none !important; }

/* Tomorrow / yesterday pages carry a small dot so they read as "not today" */
.live-cal-ico.lc-off::after {
    content: '';
    position: absolute;
    right: -.08em;
    bottom: -.06em;
    width: .26em;
    height: .26em;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 .05em #ffffff;
}

/* Gentle page lift on hover of the card or the icon */
*:hover > .live-cal-ico, .live-cal-ico:hover { transform: rotateX(14deg) translateY(-.04em); }

/* Midnight flip */
.live-cal-ico.lc-flip { animation: lcFlip .6s ease-in-out; }
@keyframes lcFlip {
    0% { transform: rotateX(0); }
    45% { transform: rotateX(90deg); }
    55% { transform: rotateX(-90deg); }
    100% { transform: rotateX(0); }
}

/* Big widget version (dashboard hero, vouchers header, login) */
.live-cal-ico.lg {
    width: 3.5rem;
    height: 3.9rem;
    font-size: 1rem;
    margin-top: .3rem;
    border-radius: .95rem;
    color: #8b5cf6;
    box-shadow: 0 14px 28px -14px rgba(124, 58, 237, .8), 0 0 0 1px rgba(196, 181, 253, .6), inset 0 -3px 0 rgba(124, 58, 237, .07);
}
.live-cal-ico.lg .lc-top { font-size: .68rem; padding: .42rem 0 .3rem; border-radius: .95rem .95rem 0 0; background: linear-gradient(135deg, #a78bfa, #f472b6); letter-spacing: .1em; }
.live-cal-ico.lg .lc-day { font-size: 1.5rem; margin-top: .12rem; }
.live-cal-ico.lg .lc-wd { font-size: .55rem; font-weight: 800; color: #94a3b8; letter-spacing: .1em; -webkit-text-fill-color: #94a3b8; }
.live-cal-ico.lg .lc-rings { top: -.32rem; padding: 0 .85rem; }
.live-cal-ico.lg .lc-rings i { width: .32rem; height: .7rem; border-radius: .2rem; }

/* ---------- Clock ---------- */
.live-clock-ico {
    display: inline-flex !important;
    align-items: center;
    gap: .4em;
    vertical-align: -.15em;
    font-style: normal;
}
.live-clock-ico::before { content: none !important; }
.live-clock-ico svg { width: 1.08em; height: 1.08em; overflow: visible; filter: drop-shadow(0 .06em .1em rgba(30, 27, 75, .25)); }
.live-clock-ico .lk-face { fill: #ffffff; stroke: currentColor; stroke-width: 1.7; }
.live-clock-ico .lk-tick { stroke: currentColor; stroke-width: .7; stroke-linecap: round; opacity: .45; }
.live-clock-ico .lk-tick.major { stroke-width: 1.1; opacity: .8; }
.live-clock-ico .lk-h { stroke: #1e1b4b; stroke-width: 2.1; stroke-linecap: round; }
.live-clock-ico .lk-m { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.live-clock-ico .lk-s { stroke: #f43f5e; stroke-width: .8; stroke-linecap: round; transition: transform .25s cubic-bezier(.4, 2.2, .5, 1); }
.live-clock-ico .lk-dot { fill: #f43f5e; stroke: #ffffff; stroke-width: .5; }
.live-clock-ico.lg svg { width: 3.3rem; height: 3.3rem; filter: drop-shadow(0 10px 16px rgba(99, 102, 241, .35)); }
.live-clock-ico.lg { color: #6366f1; }
.live-clock-ico.lg .lk-face { stroke-width: 1.1; }
.live-clock-ico .lk-digital { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Small icons sitting inside solid/pastel tiles stay crisp */
.kpi-icon-3d .live-cal-ico, .work-icon-3d .live-cal-ico, .vx-kpi .ic .live-cal-ico { font-size: 1.15em; }
.kpi-icon-3d .live-clock-ico svg, .vx-kpi .ic .live-clock-ico svg { width: 1.15em; height: 1.15em; }