/* =====================================================================
   workflow-tiles.css — Styles for the reservation type tiles on default.aspx
   ONE-89863
   
   NOTE: --theme-primary CSS variable is set inline on default.aspx
         from AssociatedTheme.PrimaryOneNormal (server-rendered).
   ===================================================================== */

/* --- Base tile --- */
.panel-nav {
    border-radius: 25px !important;
    background-color: rgba(255, 255, 255, .87);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    border: 2px solid transparent;
}

.panel-nav h5 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.panel-nav small {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- Tile link sizing --- */
.panel-link.workflow-tile {
    width: 100%;
    display: block;
    outline: none;
    text-decoration: none;
}

.panel-link.workflow-tile:focus,
.panel-link.workflow-tile:active {
    outline: none;
    text-decoration: none;
}

/* --- Hover state --- */
.panel-nav:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 1);
}

/* --- Press/click feedback --- */
.panel-nav:active {
    transform: translateY(0px) scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* --- Selected tile --- */
.panel-nav.tile-active {
    border: 2px solid var(--theme-primary);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px var(--theme-primary-glow, rgba(51, 122, 183, 0.25)), 0 4px 12px var(--theme-primary-shadow, rgba(51, 122, 183, 0.2));
    transform: translateY(-2px);
    position: relative;
}

.panel-nav.tile-active::after {
    content: '\f058';
    font-family: 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 18px;
    color: var(--theme-primary);
    pointer-events: none;
}

.panel-nav.tile-active:hover {
    box-shadow: 0 0 0 3px var(--theme-primary-glow, rgba(51, 122, 183, 0.3)), 0 6px 18px var(--theme-primary-shadow, rgba(51, 122, 183, 0.25));
}

.panel-nav.tile-active h5 {
    color: var(--theme-primary);
}

/* --- Loading state (redirect/transfer navigation) --- */
.panel-nav.tile-loading {
    opacity: 0.6;
    cursor: wait;
    transform: none !important;
}

/* --- Keyboard focus (only on Tab, not mouse click) --- */
.panel-link.workflow-tile:focus-visible .panel-nav {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--theme-primary-glow, rgba(51, 122, 183, 0.2));
}

/* Suppress default browser outline on mouse click */
.panel-link.workflow-tile:focus:not(:focus-visible) .panel-nav {
    outline: none;
}

/* When tile is selected AND keyboard-focused, merge into one clean indicator */
.panel-link.workflow-tile:focus-visible .panel-nav.tile-active {
    outline-offset: 4px;
}