/* =========================================================================
   Request & Cancel Leave Policy, and the floating button that leads to it.

   Its own file rather than more of style.css: the policy is nine rules that
   change when the department changes them, and it should be possible to
   restyle the page without opening the 2000-line stylesheet every other page
   on the site depends on.

   The palette is style.css's own - #2563eb primary, white cards, 10px radii -
   so the page reads as part of the site rather than a leaflet pasted into it.
   ========================================================================= */

/* ------------------------------------------------------------ the headline */

/* The two numbers, before any of the rules that qualify them: how many
   requests you get, and how early they have to be in. Side by side because
   they are read together and neither is a footnote to the other; stacked on a
   narrow screen, where side by side would make both of them small. */
.pol-heroes {
    display: grid; gap: 12px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.pol-heroes .pol-hero { margin-bottom: 0; height: 100%; }

.pol-hero {
    display: flex; align-items: center; gap: 20px;
    border-left: 4px solid #2563eb;
}
.pol-hero-num {
    font-size: 54px; font-weight: 800; line-height: 1;
    color: #2563eb; font-variant-numeric: tabular-nums; flex: none;
    display: flex; align-items: baseline; gap: 2px;
}

/* "wks" rides with the number rather than sitting in the sentence, so the two
   panels read as one measurement each. */
.pol-hero-unit { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

/* The notice period is a deadline rather than an allowance, so it is the
   warning colour the rest of the page uses for "mind this" - the same amber as
   the exceptions badge and the policy warning on a request. */
.pol-hero-notice { border-left-color: #f59e0b; }
.pol-hero-notice .pol-hero-num { color: #b45309; }
.pol-hero-text h2 {
    margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #1f2937;
}
.pol-hero-text p { margin: 0; font-size: 14px; line-height: 1.55; }

/* The other half of the rule, and the half that gets misread: the deadline is
   on taking leave back, not on asking for it. Its own line and quieter than the
   sentence above, because it is what the panel is *not* asking of anybody. */
.pol-notice-sub {
    display: block; margin-top: 5px; font-size: 13px; color: #6b7280;
}

/* --------------------------------------------------------------- the rules */

.pol-group { padding: 18px 20px; }

.pol-head {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #1f2937;
}

/* The badge carries the whole of "how much does this cost" - 1, 2 or 0 - so
   the three groups can be told apart before a word of them is read. */
.pol-badge {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; line-height: 1;
}
.pol-badge-1 { background: #dbeafe; color: #1d4ed8; }
.pol-badge-2 { background: #fee2e2; color: #b91c1c; }
.pol-badge-0 { background: #dcfce7; color: #166534; }
.pol-badge-n { background: #ede9fe; color: #6d28d9; font-size: 14px; }
.pol-badge-s { background: #fef3c7; color: #92400e; font-size: 13px; }

.pol-list { margin: 0; padding-left: 0; list-style: none; }
.pol-list li {
    position: relative; padding: 9px 0 9px 18px;
    font-size: 14px; line-height: 1.6; color: #374151;
    border-top: 1px solid #f1f4f8;
}
.pol-list li:first-child { border-top: 0; padding-top: 2px; }
.pol-list li::before {
    content: ''; position: absolute; left: 0; top: 1.05em;
    width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1;
}
.pol-list li:first-child::before { top: .55em; }

/* The one sentence in the policy that is an instruction rather than a rule. */
.pol-warn {
    display: block; margin-top: 5px;
    font-size: 13px; font-weight: 700; color: #b91c1c;
}

/* "and will be indicated as: George (Med)" - the actionable half of a rule,
   set apart from the sentence so it can be copied at a glance. */
.pol-tag {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; padding: 3px 9px; border-radius: 999px;
    background: #f3f4f6; font-size: 12px; color: #4b5563;
}
.pol-tag code, .pol-example code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; font-weight: 700; color: #1f2937;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 5px;
    padding: 1px 6px;
}

/* -------------------------------------------------------- naming examples */

.pol-naming p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #374151; }

.pol-examples {
    display: grid; gap: 8px; margin-bottom: 12px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Label above its meaning rather than beside it: side by side, the longer
   descriptions wrapped to four lines and the four cards came out different
   heights, which read as though one of them mattered more. */
.pol-example {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #f9fafb;
}
.pol-example code { font-size: 13px; }
.pol-example span { font-size: 12px; color: #6b7280; line-height: 1.45; }

.pol-special p { margin: 0; font-size: 14px; line-height: 1.6; color: #374151; }
.pol-foot { margin-top: 4px; text-align: center; }

/* ====================================================== the floating button */

/* Right edge, vertically centred, on the three pages where somebody is about
   to request or cancel something. Fixed, so it stays put down a long list of
   requests - which is exactly where the question tends to occur. */
.policy-fab {
    position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
    z-index: 45;
    display: flex; align-items: center; gap: 0;
    height: 54px; padding: 0; border-radius: 27px;
    background: #fff; border: 1px solid #e2e8f0;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .16);
    text-decoration: none; overflow: hidden;
    transition: gap .18s ease, padding .18s ease, box-shadow .18s ease,
                border-color .18s ease;
}
.policy-fab:hover, .policy-fab:focus-visible {
    gap: 10px; padding-right: 20px;
    border-color: #bfdbfe; box-shadow: 0 10px 26px rgba(37, 99, 235, .22);
    outline: none;
}

/* The icon fills the circle rather than floating in the middle of it.
   
   The ceiling is geometry, not taste: the button is round and clips what it
   contains, so a square picture only fits whole up to the circle's inscribed
   square - 54 / sqrt(2), a little over 38px. At 42px the corners were being
   cut off. 8px of padding puts it at 38px, which is as large as it goes with
   nothing lost, and a good deal larger than the 30px it started at. */
.policy-fab-ico {
    flex: none; width: 54px; height: 54px; padding: 8px;
    display: block; object-fit: contain;
}

/* The label is closed until the button is hovered, so it is an icon at rest
   and says what it is the moment somebody goes near it. Width rather than
   display, so it slides rather than appearing. */
.policy-fab-text {
    max-width: 0; opacity: 0;
    font-size: 13px; font-weight: 700; color: #1d4ed8;
    white-space: nowrap; line-height: 1;
    transition: max-width .18s ease, opacity .15s ease;
}
.policy-fab:hover .policy-fab-text,
.policy-fab:focus-visible .policy-fab-text { max-width: 160px; opacity: 1; }

/* A phone has no hover and little room, so it stays a circle and leans on the
   accessible name instead. */
@media (max-width: 700px) {
    .policy-fab { right: 10px; height: 46px; }
    .policy-fab-ico { width: 46px; height: 46px; padding: 7px; }
    .policy-fab:hover, .policy-fab:focus-visible { gap: 0; padding-right: 0; }
    .policy-fab .policy-fab-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .policy-fab, .policy-fab-text { transition: none; }
}

/* It is a way to another page, not part of the record. */
@media print { .policy-fab { display: none !important; } }

/* =========================================================================
   The policy warning: the admin's button, and the mark it leaves on the
   applicant's name.
   ========================================================================= */

/* The button sits inside .request-tags, to the left of the tags that say what
   the request is and where it has got to. Its own little form, so it is never
   pressed on the way to Approve. */
.policy-warn-form { display: inline-flex; margin: 0; }

.policy-warn-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 5px; border-radius: 999px;
    border: 1px dashed #d1d5db; background: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    color: #9ca3af; cursor: pointer; line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
}
.policy-warn-btn:hover {
    background: #fffbeb; border-color: #fbbf24; color: #92400e;
}
.policy-warn-img {
    width: 15px; height: 15px; object-fit: contain;
    filter: grayscale(1); opacity: .5; transition: filter .15s, opacity .15s;
}
.policy-warn-btn:hover .policy-warn-img { filter: none; opacity: 1; }

/* Already flagged. Solid rather than dashed, and in its own colour, so "this
   one has been warned" is readable down a list without opening anything. */
.policy-warn-btn.is-on {
    border-style: solid; border-color: #f59e0b;
    background: #fef3c7; color: #92400e;
}
.policy-warn-btn.is-on .policy-warn-img { filter: none; opacity: 1; }

/* ------------------------------------------------ the mark on the name */

/* Beside the applicant's name, on both the admin panel and the staff-facing
   list - the same mark to the person who set it and the person it is about. */
.policy-mark {
    position: relative; display: inline-flex; align-items: center;
    margin-left: 7px; vertical-align: middle; cursor: help;
}
.policy-mark-img {
    width: 18px; height: 18px; object-fit: contain;
    display: block;
}

/* The reason, on hover and on keyboard focus.
   
   It is never shown where it is written. The mark lives inside a request card,
   and `.request-card` is `overflow: hidden` for the corner ribbon, so a tooltip
   opening upwards was cut off at the card's edge - which is what was happening.
   policy.js lifts it to <body> and pins it to the viewport, where no ancestor's
   overflow can reach it; `.is-out` is that state.
   
   Closed by default, and closed in a way that does not depend on the script:
   if policy.js never loads, nothing appears rather than a bare sentence sitting
   under somebody's name. */
.policy-mark-tip {
    position: absolute; left: -9999px; top: -9999px;
    z-index: 2000; width: max-content; max-width: 280px;
    padding: 7px 10px; border-radius: 7px;
    background: #78350f; color: #fff;
    font-size: 12px; font-weight: 500; line-height: 1.4; text-align: left;
    white-space: normal;
    opacity: 0; visibility: hidden; pointer-events: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
}

/* Lifted out and pinned to the window. */
.policy-mark-tip.is-out {
    position: fixed; left: 0; top: 0;
    transition: opacity .13s ease;
}
.policy-mark-tip.is-open { opacity: 1; visibility: visible; }

/* The arrow points at the mark, not at the middle of the box - the box gets
   nudged sideways to stay on screen and the mark does not move with it. */
.policy-mark-tip.is-out::after {
    content: ''; position: absolute; top: 100%;
    left: var(--arrow, 50%); margin-left: -5px;
    border: 5px solid transparent; border-top-color: #78350f;
}
.policy-mark-tip.is-out.is-below::after {
    top: auto; bottom: 100%;
    border-top-color: transparent; border-bottom-color: #78350f;
}

/* A flagged request, at a glance down the list. */
.request-card:has(.policy-mark) { border-left: 3px solid #f59e0b; }

/* ------------------------------------------------------ the reason dialog */

#policyModal .code-modal-box { max-width: 420px; }
#policyModal textarea {
    width: 100%; box-sizing: border-box; margin-top: 6px;
    padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px;
    font: inherit; font-size: 14px; line-height: 1.45; resize: vertical;
}
#policyModal textarea:focus {
    outline: none; border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .2);
}

@media print {
    .policy-warn-form { display: none !important; }
    .policy-mark-tip  { display: none !important; }
}