/*
    Shared styling for the LockPro Field App pages (Dashboard, WorkOrderDetail,
    VehicleInventory, SignatureCapture). These Razor components live in
    LockPro.Shared and are rendered both by the main LockPro web app (mobile
    browser view) and by the LockPro.Mobile MAUI Blazor Hybrid app, so this
    stylesheet must be referenced by both hosts to keep the look consistent.

    Color palette matches the rest of the app (see Login.razor.css and the
    "apple-*" classes used in Pages/LPTenant/Dashboard.razor):
      - Navy gradient: #0b1a3d -> #142a5c -> #1d3a7a
      - Accent blue:   #007AFF / #1b6ec2
      - Card surface:  #ffffff with soft shadow + rounded corners
*/

.field-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

/* ---------- Mobile bottom-up hamburger menu (field app) ---------- */

.field-bottom-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
}

.field-bottom-menu-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 30px;
    background: rgba(27, 110, 194, 0.92);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -3px 8px rgba(0,0,0,0.2);
    font-size: 0.8rem;
    font-weight: 600;
}

.field-bottom-menu-tab-icon {
    display: inline-block;
    transition: transform 0.25s ease;
}

.field-bottom-menu-tab-icon.flipped {
    transform: rotate(180deg);
}

.field-bottom-menu-panel {
    max-height: 0;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    transition: max-height 0.3s ease;
}

.field-bottom-menu.open .field-bottom-menu-panel {
    max-height: 60vh;
}

.field-bottom-menu-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.field-bottom-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #142a5c;
}

.field-bottom-menu-item:hover {
    background: rgba(27, 110, 194, 0.08);
}

.field-bottom-menu-logout {
    color: #d9363e;
    font-weight: 600;
}

.field-bottom-menu-logout:hover {
    background: rgba(217, 54, 62, 0.1);
}

/* Reserve space at the bottom of scrollable content so the fixed menu tab
   never covers page content/buttons. */
.field-app-shell .content {
    padding-bottom: calc(1.5rem + 30px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Dashboard ---------- */

.dashboard-page .dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dashboard-page .dashboard-header h2 {
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.dashboard-page h3 {
    margin: 1.5rem 0 0.75rem;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ---------- Dashboard tile grid ----------
   Scoped to .dashboard-page / .field-page so these rules only affect the
   Field App pages (LockPro.Shared) and never leak into the main tenant
   dashboard, which defines its own unscoped .tile-grid / .apple-card.tile
   rules in wwwroot/css/app.css. */

.dashboard-page .tile-grid,
.field-page .tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 0.5rem;
}

.dashboard-page .tile-link,
.field-page .tile-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.dashboard-page .tile-link .apple-card,
.field-page .tile-link .apple-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-page .tile-link:hover .apple-card,
.field-page .tile-link:hover .apple-card {
    transform: translateY(-2px);
}

.dashboard-page .apple-card.tile,
.field-page .apple-card.tile {
    border-radius: 16px;
    padding: 18px 12px;
    text-align: center;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        8px 8px 18px rgba(20, 42, 92, 0.18),
        -6px -6px 14px rgba(255, 255, 255, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.28);
}

.dashboard-page .apple-card.tile h3,
.field-page .apple-card.tile h3 {
    margin: 0 0 6px;
    font-size: 1.6rem;
    color: #142a5c;
}

.dashboard-page .apple-card.tile p,
.field-page .apple-card.tile p {
    margin: 0;
    font-size: 0.9rem;
    color: #1f2937;
    font-weight: 600;
}

.dashboard-page .apple-card.tile.tile-clocked-in,
.field-page .apple-card.tile.tile-clocked-in {
    background: rgba(234, 247, 238, 0.6);
}

.dashboard-page .apple-card.tile .tile-clocked-in-text,
.field-page .apple-card.tile .tile-clocked-in-text {
    color: #1f9d55;
    font-weight: 700;
    animation: clockPulse 1.6s ease-in-out infinite;
}

@keyframes clockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.work-order-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.work-order-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    box-shadow:
        8px 8px 18px rgba(20, 42, 92, 0.18),
        -6px -6px 14px rgba(255, 255, 255, 0.4);
    padding: 1rem 1.1rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.work-order-card:hover,
.work-order-card:active {
    transform: translateY(-1px);
}

.work-order-card .wo-number {
    font-weight: 700;
    color: #142a5c;
    font-size: 0.95rem;
}

.work-order-card .wo-customer {
    font-weight: 600;
    color: #1f2937;
    margin-top: 0.15rem;
}

.work-order-card .wo-service {
    color: #374151;
    font-size: 0.9rem;
    margin-top: 0.15rem;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.work-order-card .wo-status {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
    background: #6c757d;
    color: #ffffff;
}

.work-order-card .wo-status.scheduled { background: #6c757d; color: #ffffff; }
.work-order-card .wo-status.inprogress { background: #007bff; color: #ffffff; }
.work-order-card .wo-status.paused { background: #ffc107; color: #000000; }
.work-order-card .wo-status.needsparts { background: #dc3545; color: #ffffff; }
.work-order-card .wo-status.completed { background: #28a745; color: #ffffff; }

.badge-warning {
    background: #fde68a;
    color: #92400e;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 0.4rem;
}

/* ---------- Work Order Detail ---------- */

.work-order-detail h2 {
    margin: 0 0 0.25rem;
    color: #142a5c;
    font-weight: 700;
}

.work-order-detail h3 {
    margin: 1.5rem 0 0.6rem;
    color: #1f2937;
    font-weight: 600;
    font-size: 1.05rem;
}

.work-order-detail .customer { font-weight: 600; color: #1f2937; margin: 0; }
.work-order-detail .address,
.work-order-detail .service { color: #6b7280; margin: 0.15rem 0; }
.work-order-detail .status { font-weight: 600; margin: 0.5rem 0 0; }
.work-order-detail .geofence-mismatch { font-size: 0.85rem; }

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.needs-parts-form,
.add-line-item-form,
.signature-required-prompt {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    margin: 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.soft-complete-label {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
}

.line-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.line-item-list li {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.6rem;
    margin: 0.75rem 0;
}

.photo-thumb {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.photo-thumb img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
}

.photo-thumb button {
    position: absolute;
    bottom: 4px;
    right: 4px;
}

/* ---------- Vehicle Inventory ---------- */

.vi-page h2 {
    color: #142a5c;
    font-weight: 700;
    margin-bottom: 1rem;
}

.vi-page .search-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.vi-page .item-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 2px 8px rgba(20, 42, 92, 0.06);
}

.vi-page .item-row img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.vi-page .item-info {
    flex: 1;
    min-width: 0;
}

.vi-page .item-name {
    font-weight: 600;
    color: #1f2937;
}

.vi-page .item-qty {
    color: #6b7280;
    font-size: 0.85rem;
}

/* ---------- Signature Capture ---------- */

.signature-capture-page h2 {
    color: #142a5c;
    font-weight: 700;
}

.signature-capture-page canvas {
    width: 100%;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    touch-action: none;
    background: #ffffff;
}

/* ---------- Mobile safe-area / responsive tweaks ---------- */

@media (max-width: 480px) {
    .field-page {
        padding: 1rem 0.75rem 1.5rem;
    }
}

/* ---------- Work order action sheet ---------- */

.work-order-card {
    cursor: pointer;
}

.action-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1050;
}

.action-sheet {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    padding: 1rem 1.25rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.action-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.action-sheet-header .close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.action-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-sheet-list button {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 1rem;
    border: none;
}

.apple-button-primary {
    background: #007AFF;
    color: #ffffff;
}

.apple-button-primary:disabled {
    background: #9fc7fb;
    cursor: not-allowed;
}

.apple-button-secondary {
    background: #f1f3f5;
    color: #1f2937;
}

.apple-button-secondary:disabled {
    color: #9ca3af;
    cursor: not-allowed;
}

.item-search-suggestions {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.item-search-suggestions li {
    border-bottom: 1px solid #f1f3f5;
}

.item-search-suggestions li:last-child {
    border-bottom: none;
}

.item-search-suggestions button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
}

.item-search-suggestions button:hover {
    background: #f1f3f5;
}