/* ============================================================
   Attendance — check in / out
   ------------------------------------------------------------
   Prefixed .at- so it collides with neither Filament nor the
   other layers. Loaded after office-modern.css.

   The page has one job: say whether you are working, for how
   long, and give you the one button that changes that. Every
   other element is subordinate to those.
   ============================================================ */

.at {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
}

/* ---------- hero ---------- */
.at-hero {
    position: relative;
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius, 20px);
    background: var(--of-surface);
    box-shadow: var(--of-shadow);
    padding: 26px 24px 22px;
    overflow: hidden;
}

/* A colour band along the top carries the state, so it reads at
   a glance from across a room without needing the label. */
.at-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--of-muted);
}
.at-hero.is-working::before { background: linear-gradient(90deg, #0e9f6e, #34d399); }
.at-hero.is-done::before    { background: linear-gradient(90deg, #2563eb, #60a5fa); }

.at-hero-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.at-dot {
    width: 9px; height: 9px; border-radius: 999px;
    background: var(--of-faint);
    flex-shrink: 0;
}
.at-hero.is-working .at-dot {
    background: #0e9f6e;
    box-shadow: 0 0 0 4px rgba(14, 159, 110, .16);
    animation: at-pulse 2.4s ease-in-out infinite;
}
.at-hero.is-done .at-dot { background: #2563eb; }

@keyframes at-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(14, 159, 110, .16); }
    50%      { box-shadow: 0 0 0 8px rgba(14, 159, 110, .05); }
}

.at-state {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--of-muted);
}

.at-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--of-faint);
}

/* The number is the point of the page, so it gets the size. */
.at-clock {
    margin: 0;
    font-size: clamp(38px, 2rem + 3vw, 54px);
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.05;
    color: var(--of-text);
    font-variant-numeric: tabular-nums;
}

.at-sub {
    margin: 7px 0 0;
    font-size: 13.5px;
    color: var(--of-muted);
}

.at-warn { color: #b54708; font-weight: 600; }

.at-tiny {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--of-faint);
}

/* ---------- progress against required hours ---------- */
.at-bar {
    margin-top: 18px;
    height: 8px;
    border-radius: 999px;
    background: var(--of-bg);
    overflow: hidden;
}

.at-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0e9f6e, #34d399);
    transition: width .4s var(--of-ease, ease);
}

/* ---------- cards ---------- */
.at-card {
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius, 20px);
    background: var(--of-surface);
    box-shadow: var(--of-shadow);
    padding: 20px;
}

.at-h2 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--of-text);
}

/* ---------- work mode ---------- */
.at-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.at-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 16px 10px;
    border: 1.5px solid var(--of-border-2);
    border-radius: 14px;
    background: var(--of-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.at-mode:hover  { border-color: var(--of-muted); }
.at-mode:active { transform: translateY(1px); }

.at-mode.is-on {
    border-color: var(--of-primary);
    background: rgba(14, 159, 110, .07);
    box-shadow: 0 0 0 3px rgba(14, 159, 110, .12);
}

.at-mode-icon  { font-size: 22px; line-height: 1; }
.at-mode-label { font-size: 12.5px; font-weight: 600; color: var(--of-text); }

/* ---------- site fields ---------- */
.at-site {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 14px;
}

.at-input {
    width: 100%;
    font-size: 13.5px;
    padding: 11px 13px;
    border: 1px solid var(--of-border-2);
    border-radius: 11px;
    background: var(--of-surface);
    color: var(--of-text);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.at-input:focus {
    outline: none;
    border-color: var(--of-primary);
    box-shadow: 0 0 0 3px rgba(14, 159, 110, .14);
}

/* ---------- buttons ---------- */
.at-btn {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s, transform .1s, opacity .15s;
}
.at-btn:active:not(:disabled) { transform: translateY(1px); }
.at-btn:disabled { opacity: .6; cursor: progress; }

.at-btn-go   { background: #0e9f6e; color: #fff; box-shadow: 0 2px 8px rgba(14,159,110,.28); }
.at-btn-go:hover:not(:disabled)   { background: #057a55; }

.at-btn-stop { background: #e11d48; color: #fff; box-shadow: 0 2px 8px rgba(225,29,72,.26); }
.at-btn-stop:hover:not(:disabled) { background: #be123c; }

.at-btn-ghost {
    width: auto;
    min-height: 34px;
    padding: 0 13px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--of-bg);
    color: var(--of-text);
    border-radius: 9px;
    flex-shrink: 0;
}
.at-btn-ghost:hover { background: var(--of-border); }

/* ---------- notices ---------- */
.at-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 15px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.5;
}

.at-note-warn {
    background: #fffaeb;
    border: 1px solid rgba(181, 71, 8, .2);
    color: #b54708;
}

/* ---------- location strip ---------- */
/* Deliberately quiet. Location is a detail of checking in, not a
   gate in front of it — a denied permission used to look like an
   error blocking the whole page. */
.at-loc {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--of-border);
    border-radius: 13px;
    background: var(--of-bg);
    font-size: 12.5px;
    color: var(--of-muted);
}

.at-loc-icon { font-size: 15px; flex-shrink: 0; }
.at-loc-text { flex: 1; min-width: 0; line-height: 1.45; }

.at-loc.is-ok  { border-color: rgba(14, 159, 110, .3); }
.at-loc.is-ok .at-loc-text { color: #057a55; font-weight: 600; }

.at-loc.is-bad { border-color: rgba(181, 71, 8, .25); background: #fffaeb; }
.at-loc.is-bad .at-loc-text { color: #b54708; }

@media (prefers-color-scheme: dark) {
    .at-note-warn,
    .at-loc.is-bad { background: #2a1f0d; }
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
    .at { gap: 12px; }
    .at-hero { padding: 22px 18px 18px; }
    .at-card { padding: 16px; }
    .at-loc  { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .at-dot, .at-bar-fill, .at-mode, .at-btn { animation: none !important; transition: none !important; }
}

/* ============================================================
   Clickable dashboard stats
   ------------------------------------------------------------
   Lives here rather than in office.css so the base layer stays
   untouched. A stat that navigates has to look like it does.
   ============================================================ */

.of-stat-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform .14s var(--of-ease, ease),
                box-shadow .14s var(--of-ease, ease),
                border-color .14s;
}

.of-stat-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--of-shadow-md);
    border-color: var(--of-border-2);
}

.of-stat-link:active { transform: translateY(0); }

.of-stat-link:focus-visible {
    outline: none;
    box-shadow: var(--of-ring);
}

/* A quiet chevron, so it reads as navigable without shouting. */
.of-stat-link::after {
    content: '›';
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 19px;
    line-height: 1;
    color: var(--of-faint);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .14s, transform .14s;
}

.of-stat-link:hover::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .of-stat-link, .of-stat-link::after { transition: none !important; }
    .of-stat-link:hover { transform: none; }
}