/* =========================================================
   LogicCalc Saved Locations v1
   Loaded after home.css from Home.razor.
   ========================================================= */

/* Workspace: four overview cards instead of the previous three. */
.workspace-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Route Builder quick actions — icon-only Saved Location + Map Pick. */
.route-saved-location-wrap {
    position: absolute;
    right: 29px;
    top: 50%;
    z-index: 24;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
}

/* IMPORTANT:
   These are deliberately icon-only actions.
   No border, no button background, no shadow, no visible box. */
.route-saved-location-btn,
.route-map-pick-inside .route-map-pick-btn {
    width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;

    transition:
        transform 140ms ease,
        color 140ms ease,
        opacity 140ms ease;
}

/* Star */
.route-saved-location-btn {
    color: #858b81 !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

.route-saved-location-btn:hover {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #606a59 !important;
    transform: scale(1.08);
}

.route-saved-location-btn:active {
    transform: scale(0.92);
}

.route-saved-location-btn.is-saved {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #70834f !important;
}

/* Map pin */
.route-map-pick-inside {
    right: 2px !important;
    z-index: 24;
}

.route-map-pick-inside .route-map-pick-btn {
    width: 30px !important;
    height: 30px !important;
    color: #688646 !important;
}

.route-map-pick-inside .route-map-pick-btn:hover:not(:disabled) {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #4f6e34 !important;
    transform: scale(1.08);
}

.route-map-pick-inside .route-map-pick-btn:active:not(:disabled) {
    transform: scale(0.92);
}

.route-map-pick-inside .route-map-pick-btn.is-active {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #45652d !important;
}

.route-map-pick-inside .route-map-pick-btn:disabled {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: default;
    opacity: 0.36;
}

.route-map-pick-inside .route-map-pick-btn svg {
    width: 18px !important;
    height: 18px !important;
    display: block;
}

/* Keep keyboard focus visible by changing icon opacity only.
   Still no surrounding frame. */
.route-saved-location-btn:focus-visible,
.route-map-pick-inside .route-map-pick-btn:focus-visible {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 0.68;
}

/* Reserve room for the two icon actions. */
.route-point-input-wrap .route-stop-control {
    padding-right: 86px !important;
}

/* Short, subtle fade before the icons — no white rectangular patch. */
.route-point-input-wrap::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 51px;
    bottom: 2px;
    z-index: 18;
    width: 72px;
    pointer-events: none;

    /*
       Long, gentle fade: the overlay stays almost invisible for the
       first half and only becomes opaque close to the action icons.
       This prevents the visible "white rectangle" effect.
    */
    background: linear-gradient(
        90deg,
        rgba(249, 250, 247, 0.00) 0%,
        rgba(249, 250, 247, 0.02) 18%,
        rgba(249, 250, 247, 0.08) 34%,
        rgba(249, 250, 247, 0.20) 50%,
        rgba(249, 250, 247, 0.42) 66%,
        rgba(249, 250, 247, 0.70) 82%,
        rgba(249, 250, 247, 0.94) 94%,
        rgba(249, 250, 247, 1.00) 100%
    );
}

.route-point-input-wrap:focus-within::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(255, 255, 255, 0.02) 18%,
        rgba(255, 255, 255, 0.07) 34%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.40) 66%,
        rgba(255, 255, 255, 0.68) 82%,
        rgba(255, 255, 255, 0.93) 94%,
        rgba(255, 255, 255, 1.00) 100%
    );
}

/* Tooltip for the star action. */
.route-saved-location-wrap::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 1100;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(34, 38, 32, 0.94);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.route-saved-location-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    z-index: 1100;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(34, 38, 32, 0.94);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.route-saved-location-wrap:hover::after,
.route-saved-location-wrap:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Saved Locations come first in address autocomplete. */
.saved-location-autocomplete {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}

.saved-location-autocomplete-heading {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 5px;
    color: #7b806d;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.saved-location-autocomplete-heading.is-address-results {
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid rgba(107, 115, 91, 0.12);
}

.saved-location-autocomplete-item,
.saved-location-photon-item {
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow: hidden;
}

.saved-location-autocomplete-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
    border-bottom: 1px solid #f3f5ee;
}

.saved-location-autocomplete-item > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.saved-location-autocomplete-item strong {
    color: #4a4a44;
    font-size: 0.87rem;
}

.saved-location-autocomplete-item small {
    color: #8a8a85;
    font-size: 0.73rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.saved-location-autocomplete-star {
    color: #8d9358;
    font-size: 0.92rem;
    margin-top: 1px;
}

.saved-location-photon-item {
    padding: 7px 10px;
    border-bottom: 1px solid #f7f9f2;
}

.saved-location-photon-title {
    color: #4a4a44;
    font-size: 0.9rem;
}

.saved-location-photon-subtitle {
    color: #8a8a85;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Workspace manager. */
.saved-locations-workspace-head {
    align-items: center;
}

.saved-locations-add-button {
    flex: 0 0 auto;
}

.saved-locations-workspace-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 11px;
    border: 1px solid rgba(107, 115, 91, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.64);
}

.saved-locations-workspace-search span {
    color: #8a8f7a;
}

.saved-locations-workspace-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #4a4a44;
    font-size: 0.82rem;
}

.saved-locations-workspace-list {
    display: grid;
    gap: 8px;
}

.saved-location-workspace-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(107, 115, 91, 0.12);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.66);
}

.saved-location-workspace-star {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(220, 227, 197, 0.7);
    color: #858b53;
}

.saved-location-workspace-main {
    min-width: 0;
}

.saved-location-workspace-main strong {
    display: block;
    color: #464841;
    font-size: 0.83rem;
}

.saved-location-workspace-main p {
    margin: 2px 0 0;
    color: #7e8178;
    font-size: 0.73rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.saved-location-workspace-main small {
    display: inline-block;
    margin-top: 4px;
    color: #9a9d93;
    font-size: 0.66rem;
    font-weight: 700;
}

.saved-location-workspace-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.saved-location-workspace-actions .workspace-action-ghost,
.saved-location-workspace-actions .workspace-action-secondary {
    white-space: nowrap;
}

.saved-locations-no-results {
    padding: 18px 12px;
    text-align: center;
    color: #888c81;
    font-size: 0.78rem;
}

.saved-location-empty-star {
    color: #8b9059;
}

/* Create / edit dialog — premium LogicCalc treatment. */
.saved-location-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(42, 46, 39, 0.30);
    backdrop-filter: blur(11px) saturate(0.92);
    -webkit-backdrop-filter: blur(11px) saturate(0.92);
    animation: saved-location-backdrop-in 160ms ease-out both;
}

.saved-location-editor {
    width: min(472px, 100%);
    max-height: min(700px, calc(100vh - 40px));
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 23px;
    background:
        linear-gradient(180deg, rgba(255, 255, 253, 0.985), rgba(250, 251, 247, 0.985));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 26px 72px rgba(34, 40, 30, 0.22),
        0 8px 24px rgba(34, 40, 30, 0.08);
    color: #40443c;
    animation: saved-location-modal-in 190ms cubic-bezier(.2, .75, .25, 1) both;
}

.saved-location-editor-header,
.saved-location-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.saved-location-editor-header {
    min-height: 84px;
    padding: 18px 20px 17px;
    border-bottom: 1px solid rgba(83, 93, 75, 0.085);
}

.saved-location-editor-header h5 {
    margin: 3px 0 0;
    color: #353934;
    font-size: 1.08rem;
    font-weight: 720;
    letter-spacing: -0.018em;
    line-height: 1.18;
}

.saved-location-editor-kicker {
    display: block;
    color: #87926f;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.075em;
    line-height: 1.1;
    text-transform: uppercase;
}

.saved-location-editor-close {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(74, 81, 68, 0.055);
    border-radius: 50%;
    background: rgba(239, 241, 235, 0.88);
    color: #70766b;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.saved-location-editor-close:hover {
    transform: scale(1.04);
    background: #e9ece4;
    color: #4e544b;
    box-shadow: 0 4px 12px rgba(43, 49, 38, 0.06);
}

.saved-location-editor-close:active {
    transform: scale(0.95);
}

.saved-location-editor-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(111, 137, 77, 0.12);
}

.saved-location-editor-body {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.saved-location-editor-body label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.saved-location-editor-body label > span {
    color: #676d62;
    font-size: 0.71rem;
    font-weight: 820;
    letter-spacing: -0.005em;
}

.saved-location-editor .glass-input {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(77, 86, 70, 0.13) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 3px 10px rgba(46, 52, 41, 0.025) !important;
    color: #4b4f48;
    font-size: 0.89rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.saved-location-editor .glass-input:hover {
    border-color: rgba(91, 104, 80, 0.19) !important;
    background: #ffffff !important;
}

.saved-location-editor .glass-input:focus {
    border-color: rgba(104, 129, 75, 0.42) !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 3px rgba(113, 140, 82, 0.09),
        0 4px 13px rgba(46, 52, 41, 0.035) !important;
}

.saved-location-editor-address-wrap {
    position: relative;
}

.saved-location-editor-spinner {
    position: absolute;
    top: 13px;
    right: 13px;
    color: #869275;
}

.saved-location-editor-suggestions {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    z-index: 4010;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(84, 96, 76, 0.12);
    border-radius: 13px;
    background: rgba(255, 255, 253, 0.985);
    box-shadow:
        0 18px 42px rgba(42, 49, 37, 0.15),
        0 5px 14px rgba(42, 49, 37, 0.055);
}

.saved-location-editor-suggestions button {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}

.saved-location-editor-suggestions button:hover {
    background: #f3f6ee;
}

.saved-location-editor-suggestions strong {
    color: #454a41;
    font-size: 0.82rem;
}

.saved-location-editor-suggestions small {
    color: #858b80;
    font-size: 0.72rem;
    line-height: 1.3;
}

.saved-location-editor-readonly-address {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(91, 101, 82, 0.11);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(244, 246, 239, 0.82), rgba(240, 243, 233, 0.72));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    color: #686d64;
    font-size: 0.79rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.saved-location-editor-error {
    padding: 9px 11px;
    border: 1px solid rgba(164, 76, 70, 0.10);
    border-radius: 10px;
    background: rgba(181, 91, 83, 0.075);
    color: #96524c;
    font-size: 0.75rem;
    line-height: 1.35;
}

.saved-location-editor-footer {
    justify-content: flex-end;
    min-height: 64px;
    padding: 13px 20px 16px;
    border-top: 1px solid rgba(83, 93, 75, 0.085);
}

.saved-location-editor-footer .workspace-action-secondary,
.saved-location-editor-footer .workspace-action-primary {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 820;
    letter-spacing: -0.005em;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.saved-location-editor-footer .workspace-action-secondary {
    border: 1px solid rgba(91, 112, 75, 0.22);
    background: rgba(255, 255, 255, 0.74);
    color: #637255;
}

.saved-location-editor-footer .workspace-action-secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(91, 112, 75, 0.34);
    background: #ffffff;
    color: #526344;
    box-shadow: 0 5px 12px rgba(52, 64, 45, 0.05);
}

.saved-location-editor-footer .workspace-action-primary {
    border-color: #61794c;
    background: linear-gradient(145deg, #688152, #5d7648);
    color: #ffffff;
    box-shadow: 0 5px 13px rgba(73, 94, 56, 0.17);
}

.saved-location-editor-footer .workspace-action-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: #587044;
    background: linear-gradient(145deg, #607b4a, #536d40);
    box-shadow: 0 7px 17px rgba(73, 94, 56, 0.21);
}

.saved-location-editor-footer .workspace-action-primary:active:not(:disabled),
.saved-location-editor-footer .workspace-action-secondary:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
}

.saved-location-editor-footer .workspace-action-primary:disabled {
    border-color: rgba(88, 107, 73, 0.20);
    background: #aab5a0;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.82);
    cursor: default;
    opacity: 0.72;
}

@keyframes saved-location-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes saved-location-modal-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 900px) {
    .workspace-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saved-location-workspace-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .saved-location-workspace-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 560px) {
    .workspace-overview-grid {
        grid-template-columns: 1fr;
    }

    .saved-locations-workspace-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .saved-location-workspace-actions {
        flex-wrap: wrap;
    }

    .saved-location-editor-backdrop {
        padding: 12px;
    }

    .saved-location-editor {
        border-radius: 19px;
    }

    .saved-location-editor-header {
        min-height: 76px;
        padding: 16px 16px 15px;
    }

    .saved-location-editor-body {
        padding: 16px;
    }

    .saved-location-editor-footer {
        padding: 12px 16px 14px;
    }

}


/* Match the existing light input treatment while preserving the fade on focus. */
.route-point-input-wrap:focus-within::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.74) 48%,
        rgba(255, 255, 255, 0.99) 100%
    );
}