/* Quick access: a draggable handle that offers four pages from this module.
 *
 * POSITION IS PHYSICAL HERE, and that is not an oversight. Everywhere else in this app a side
 * is written logically so it mirrors with the language, but a position the user dragged with
 * their own hand is a place on the screen, not a side of a sentence: mirroring it in the other
 * language would move the handle away from where they put it. The DEFAULT is centred on the
 * bottom edge, which is the same place in both directions.
 */

.app-quick-access {
    position: fixed;
    /* A position the user dragged is PHYSICAL -- a place on the screen, not a side of a
       sentence -- so the controller stores and restores it as left/top in pixels. Mirroring it
       with the language would move the handle away from where they put it. */
    top: var(--qa-y, auto);
    bottom: var(--qa-b, 18px);
    left: var(--qa-x, auto);
    transform: none;
    z-index: var(--z-drawer, 1200);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    touch-action: none;
}

.app-quick-access[hidden] { display: none; }


/* ---- handle --------------------------------------------------------------- */

.app-quick-access__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--tbl-border, #bcc3cd);
    border-radius: 999px;
    background: var(--tbl-surface, #fff);
    color: var(--tbl-brand, #005c9e);
    box-shadow: var(--app-shadow-md, 0 8px 24px rgba(16, 24, 40, .12));
    cursor: grab;
    opacity: .6;
    transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}

.app-quick-access:hover .app-quick-access__handle,
.app-quick-access:focus-within .app-quick-access__handle,
.app-quick-access.is-open .app-quick-access__handle { opacity: 1; }

.app-quick-access.is-dragging .app-quick-access__handle {
    cursor: grabbing;
    opacity: 1;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .22);
}

.app-quick-access.is-open .app-quick-access__handle,
.app-quick-access__handle:focus-visible {
    border-color: var(--tbl-brand, #005c9e);
    background: var(--tbl-brand-light, #e5f0fa);
}

/* Parked against a side, it tucks into that side and only a sliver shows -- the auto-hide.
   The controller adds the class only when the handle is actually within a few px of the edge,
   so a handle dropped in the middle of the screen never half-disappears. */
/* The class is LOGICAL -- which end of the line the handle is parked against -- and translate
   is PHYSICAL, so the pairing has to be spelled out per direction. Written once as
   translateX(-42%) for both, the tuck pushed left in Arabic too: away from the right-hand edge
   it was parked on, so instead of hiding the handle it shoved it inward and all 38px stayed
   visible, against 22 in English. */
html[dir="ltr"] .app-quick-access.is-edge-start .app-quick-access__handle,
html[dir="rtl"] .app-quick-access.is-edge-end .app-quick-access__handle { transform: translateX(-42%); }

html[dir="rtl"] .app-quick-access.is-edge-start .app-quick-access__handle,
html[dir="ltr"] .app-quick-access.is-edge-end .app-quick-access__handle { transform: translateX(42%); }

/* Untucking has to out-weigh the two rules above, and those now carry an html[dir] on the
   front. Without the leading `html` these lost the cascade and the handle stayed half off the
   edge even while its own panel was open -- 7 visible pixels of 38 in Arabic. */
html .app-quick-access.is-edge-start:hover .app-quick-access__handle,
html .app-quick-access.is-edge-end:hover .app-quick-access__handle,
html .app-quick-access.is-edge-start:focus-within .app-quick-access__handle,
html .app-quick-access.is-edge-end:focus-within .app-quick-access__handle,
html .app-quick-access.is-edge-start.is-open .app-quick-access__handle,
html .app-quick-access.is-edge-end.is-open .app-quick-access__handle { transform: translateX(0); }

.app-quick-access__icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ---- panel ---------------------------------------------------------------- */

/* No card, no border, no background: the pills ARE the panel. Each one carries its own
   shadow instead, because with nothing behind them they have to hold their own against
   whatever page content they float over. */
.app-quick-access__panel {
    position: absolute;
    inset-block-end: calc(100% + 10px);
    width: 268px;

    /* The fade. A `hidden` element cannot transition -- display:none has no intermediate --
       so the controller reveals it first and adds .is-visible on the next frame, and on the
       way out waits for the transition before hiding it again. */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease;
}

.app-quick-access__panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Opening downward, it should rise from the handle rather than fall toward it. */
.app-quick-access__panel[data-flip="down"] { transform: translateY(-6px); }
.app-quick-access__panel[data-flip="down"].is-visible { transform: translateY(0); }

/* The controller pins the panel to whichever side keeps it on screen; these are the two
   outcomes it chooses between. */
.app-quick-access__panel[data-side="start"] { inset-inline-start: 0; }
.app-quick-access__panel[data-side="end"] { inset-inline-end: 0; }
.app-quick-access__panel[data-flip="down"] {
    inset-block-end: auto;
    inset-block-start: calc(100% + 8px);
}

/* The `hidden` ATTRIBUTE, not a class: core/reset.css declares
   `[hidden] { display: none !important }`, which a class could not beat. */
.app-quick-access__panel[hidden] { display: none; }




.app-quick-access__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Every permitted page is in the DOM; the controller shows four. */
.app-quick-access__link[hidden] { display: none; }

/* Each destination is a pill, not a menu row. The blues are the platform's own brand tints --
   --tbl-brand-light for the rest state and --tbl-brand-selected for hover -- rather than new
   values, so this reads as part of the product and retunes with it. Text stays the brand blue
   at full strength: on a 4% tint that clears contrast comfortably, which a mid-blue would not. */
.app-quick-access__link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 5px 14px 5px 5px;
    border: 1px solid color-mix(in srgb, var(--tbl-brand, #005c9e) 14%, transparent);
    border-radius: 999px;
    background: var(--tbl-brand-light, #e5f0fa);
    color: var(--tbl-brand, #005c9e);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .10);
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

/* The pill is symmetrical except for the badge, which sits on the leading edge; the padding
   has to mirror with the text or the badge ends up crushed against the rim in Arabic. */
html[dir="rtl"] .app-quick-access__link { padding: 5px 5px 5px 14px; }

.app-quick-access__link:hover,
.app-quick-access__link:focus-visible {
    background: var(--tbl-brand-selected, #d4e6f7);
    border-color: color-mix(in srgb, var(--tbl-brand, #005c9e) 34%, transparent);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .16);
}

.app-quick-access__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--tbl-surface, #fff);
    color: var(--tbl-brand, #005c9e);
}

.app-quick-access__glyph {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-quick-access__link-label {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--ui-small-font-size, 12px);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Where the page sits in the menu. "Schedules" means one thing under Reports and another
   under Follow-up, so the pill says which -- quietly, and it is the part that gives way when
   the pill runs out of room. */
.app-quick-access__link-group {
    flex: 0 1 auto;
    min-width: 0;
    margin-inline-start: auto;
    padding-inline-start: 6px;
    color: color-mix(in srgb, var(--tbl-brand, #005c9e) 62%, transparent);
    font-size: 10px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Deliberately NOT a pill. The four pills are places to go; this closes the thing. Giving it
   the same shape would make "hide" the fifth destination, and a mis-tap would cost the handle
   rather than a page. Quiet by default, and it says how long it lasts -- a control that hides
   something without saying when it returns reads as "gone for good". */
.app-quick-access__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-block-start: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tbl-text-muted, #6b7a8a);
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
}

.app-quick-access__dismiss:hover,
.app-quick-access__dismiss:focus-visible {
    background: color-mix(in srgb, var(--tbl-text-muted, #6b7a8a) 12%, transparent);
    color: var(--tbl-text-secondary, #3d4a5a);
}

.app-quick-access__dismiss .app-quick-access__glyph {
    width: 13px;
    height: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .app-quick-access__handle,
    .app-quick-access__link,
    .app-quick-access__panel { transition: none; }
}

@media (max-width: 480px) {
    .app-quick-access__panel { width: calc(100vw - 48px); }
}