/* ================================================================
   Import Tool Styles
   Uses existing CSS variables from app.css (prov-* palette)
   ================================================================ */

/* -- Tool Layout ------------------------------------------------- */
.tool-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tool-header {
    background: rgba(22, 26, 32, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.tool-brand img {
    height: 40px;
    opacity: 0.9;
}

.tool-back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}

.tool-back-link:hover {
    color: var(--text-primary);
}

.tool-main {
    flex: 1;
    padding: 2rem 0 4rem;
}

.tool-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 1.5rem 0;
}

.tool-footer p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* -- Wizard Container -------------------------------------------- */
.wizard-container {
    max-width: 900px;
    margin: 0 auto;
}

.wizard-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.wizard-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* -- Wizard Step Card -------------------------------------------- */
.step-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.step-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.step-card-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Secondary guidance under a step description -- troubleshooting, caveats. */
.step-card-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

/* -- Stepper ----------------------------------------------------- */
.wizard-stepper {
    margin-bottom: 2rem;
}

/* -- Access Gate ------------------------------------------------- */
.access-code-input {
    /* Sized for all sixteen characters of XXXXX-XXXXX-XXXX at the font size
       and letter-spacing below. 320px was set when codes were eight
       characters; the fourteen-character scheme overflowed it and clipped the
       final X, so our own prompt looked like a typo. */
    max-width: 420px;
    margin: 0 auto;
}

.access-code-input input {
    width: 100%;
    font-family: 'Archivo', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid var(--border-visible);
    border-radius: 12px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
}

/* On a narrow phone the box cannot be 420px, so the text shrinks instead of
   the box clipping again. */
@media (max-width: 460px) {
    .access-code-input input {
        font-size: 1.15rem;
        letter-spacing: 2px;
        padding: 0.75rem 0.5rem;
    }
}

.access-code-input input:focus {
    border-color: var(--prov-gold);
    box-shadow: 0 0 0 0.2rem rgba(184, 151, 90, 0.2);
    outline: none;
}

.access-error {
    color: #e57373;
    font-size: 0.9rem;
    margin-top: 0.75rem;
    text-align: center;
}

.access-success {
    color: var(--prov-entry-mod);
    font-size: 0.9rem;
    margin-top: 0.75rem;
    text-align: center;
}

/* -- Import Type Selector ---------------------------------------- */
.type-option {
    background: var(--surface-base);
    border: 2px solid var(--border-visible);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    text-align: center;
}

.type-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.type-option.selected {
    border-color: var(--prov-gold);
    box-shadow: 0 0 0 1px var(--prov-gold), 0 4px 16px rgba(184, 151, 90, 0.15);
}

.type-option-icon {
    font-size: 2.5rem;
    color: var(--prov-gold);
    margin-bottom: 1rem;
}

.type-option h5 {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.type-option p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--text-secondary);
}

/* -- Project Form ------------------------------------------------ */
.project-form .form-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.project-form .form-control,
.project-form .form-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-visible);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
}

.project-form .form-control:focus,
.project-form .form-select:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(157, 176, 196, 0.4);
    box-shadow: 0 0 0 0.2rem rgba(157, 176, 196, 0.15);
    color: var(--text-primary);
}

/* -- Field validation -------------------------------------------- */
.field-limit {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.75rem;
    vertical-align: baseline;
    letter-spacing: 0.3px;
}

.field-error {
    color: #e57373;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.e-input-group.e-error,
.e-input-group.e-control-wrapper.e-error {
    border-color: #e57373 !important;
}

/* -- Upload Resources Bar ---------------------------------------- */
.upload-resources {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: rgba(184, 151, 90, 0.07);
    border: 1px solid rgba(184, 151, 90, 0.22);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
}

.upload-resource-label {
    color: var(--prov-gold);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.upload-resource-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(184, 151, 90, 0.12);
    border: 1px solid rgba(184, 151, 90, 0.28);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.upload-resource-btn:hover {
    background: rgba(184, 151, 90, 0.22);
    border-color: var(--prov-gold);
    color: var(--prov-gold);
    text-decoration: none;
}

/* -- File Upload Zone -------------------------------------------- */
.upload-zone-wrapper {
    position: relative;
    cursor: pointer;
}

.upload-zone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-zone {
    border: 2px dashed var(--border-visible);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    z-index: 1;
}

.upload-zone-wrapper:hover .upload-zone,
.upload-zone.drag-over {
    border-color: var(--prov-gold);
    background: rgba(184, 151, 90, 0.05);
}

.upload-zone-icon {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.upload-zone h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.upload-zone p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.upload-zone .text-gold {
    color: var(--prov-gold);
}

.file-info {
    background: var(--surface-base);
    border: 1px solid var(--border-visible);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.file-info-icon {
    font-size: 1.5rem;
    color: var(--prov-entry-mod);
}

.file-info-name {
    font-weight: 600;
    color: var(--text-primary);
}

.file-info-size {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* -- Sheet picker: already-imported indicator -------------------- */
.type-option.sheet-imported {
    opacity: 0.5;
    cursor: default;
    border-style: dashed;
}

.type-option.sheet-imported:hover {
    transform: none;
    box-shadow: none;
}

.sheet-imported-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--prov-entry-mod);
    margin-left: 0.5rem;
}

/* -- Column Mapper ----------------------------------------------- */
.mapping-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.mapping-row:last-child {
    border-bottom: none;
}

.mapping-source {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Archivo', monospace;
    font-size: 0.9rem;
}

.mapping-arrow {
    color: var(--text-muted);
    font-size: 1.25rem;
}

.mapping-target {
    flex: 1;
}

.mapping-confidence {
    width: 80px;
    text-align: center;
}

.confidence-high {
    color: var(--prov-entry-mod);
    font-weight: 600;
    font-size: 0.8rem;
}

.confidence-medium {
    color: var(--prov-gold);
    font-weight: 600;
    font-size: 0.8rem;
}

.confidence-low {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* -- Entry Editor (Syncfusion Grid overrides) -------------------- */
.entry-grid-wrapper {
    border-radius: 12px;
    overflow: auto;
    border: 1px solid var(--border-subtle);
}

/* Syncfusion dark theme overrides to match Provauto palette */
.entry-grid-wrapper .e-grid {
    background: var(--surface-elevated) !important;
    border: none !important;
}

.entry-grid-wrapper .e-grid .e-headercell {
    background: var(--surface-overlay) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

.entry-grid-wrapper .e-grid .e-rowcell {
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
    font-size: 0.9rem !important;
}

.entry-grid-wrapper .e-grid .e-row:hover .e-rowcell {
    background: rgba(255, 255, 255, 0.03) !important;
}

.entry-grid-wrapper .e-grid .e-toolbar {
    background: var(--surface-elevated) !important;
    border-color: var(--border-subtle) !important;
}

/* -- Manual Entry Form ------------------------------------------- */
.manual-entry-form {
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

/* -- Review/Download --------------------------------------------- */
.review-summary {
    background: var(--surface-base);
    border: 1px solid var(--border-visible);
    border-radius: 12px;
    padding: 1.5rem;
}

.review-stat {
    text-align: center;
    padding: 1rem;
}

.review-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--prov-gold);
}

.review-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.download-btn {
    background: var(--prov-entry-mod);
    color: #fff;
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    transition: background 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.download-btn:hover {
    background: #2ac084;
    color: #fff;
    transform: translateY(-1px);
}

.download-btn:active {
    transform: translateY(0);
}

/* -- Handoff choice ---------------------------------------------------
   Two ways to get the import onto the phone, side by side and given the
   same weight on purpose.

   These used to be stacked with the JSON preview above them, which made
   "send to my phone" the third screenful of a page whose first two were a
   summary and a wall of JSON. Anything below a fold is not a choice, it is
   a thing most people never learn exists -- and the route that got buried
   was the one that needs no file moved between devices.

   Different colour rather than different prominence: sending is faster,
   downloading needs no network on the phone, and which of those matters is
   the user's business, not ours. */
.handoff-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    text-align: left;
}

.handoff-option {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
}

.handoff-option .download-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.handoff-option-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* The handoff route. Same size, same weight, different accent. */
.download-btn--handoff {
    background: var(--prov-entry-maintenance);
}

.download-btn--handoff:hover {
    background: #8ec1fc;
}

@media (max-width: 640px) {
    .handoff-choice {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -- JSON preview -----------------------------------------------------
   Collapsed by default. It is reassurance for the curious, not a step, and
   left open it pushes the actions off the screen. */
.json-details {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.json-details > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
    list-style: revert;
}

.json-details[open] > summary {
    margin-bottom: 0.75rem;
}

.json-preview {
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}

/* -- Wizard Navigation Buttons ----------------------------------- */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

/* Shared button styles -- usable inside and outside wizard-nav */
.btn-prev {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-visible);
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-prev:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.btn-next {
    background: var(--prov-gold);
    color: var(--prov-n900);
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.btn-next:hover {
    background: var(--prov-gold-hover);
    transform: translateY(-1px);
}

.btn-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* -- Mobile Banner ----------------------------------------------- */
.mobile-banner {
    background: rgba(184, 151, 90, 0.1);
    border: 1px solid rgba(184, 151, 90, 0.3);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: none;
    align-items: center;
    gap: 0.75rem;
}

.mobile-banner-icon {
    font-size: 1.25rem;
    color: var(--prov-gold);
}

.mobile-banner p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

@media (max-width: 767.98px) {
    .mobile-banner {
        display: flex;
    }

    .step-card {
        padding: 1.25rem;
    }

    .wizard-title {
        font-size: 1.35rem;
    }

    .upload-zone {
        padding: 2rem 1.25rem;
    }
}

/* -- Syncfusion Component Overrides (global for tool pages) ------ */
/* Make Syncfusion dropdowns match the dark theme */
.e-input-group,
.e-input-group.e-control-wrapper {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--border-visible) !important;
    border-radius: 10px !important;
}

.e-input-group:hover,
.e-input-group.e-control-wrapper:hover {
    border-color: rgba(157, 176, 196, 0.4) !important;
}

.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--prov-gold) !important;
    box-shadow: 0 0 0 0.15rem rgba(184, 151, 90, 0.2) !important;
}

/* -- Stepper Overrides ------------------------------------------- */
.e-stepper .e-step-completed .e-indicator {
    background: var(--prov-entry-mod) !important;
    border-color: var(--prov-entry-mod) !important;
}

.e-stepper .e-step-inprogress .e-indicator {
    background: var(--prov-gold) !important;
    border-color: var(--prov-gold) !important;
}

.e-stepper .e-step-label {
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
}

/* -- Warning/Info Alerts ----------------------------------------- */
.tool-alert {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tool-alert-warning {
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: var(--prov-entry-repair);
}

.tool-alert-info {
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--prov-entry-maintenance);
}

.tool-alert-success {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: var(--prov-entry-mod);
}

.tool-alert i {
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

/* -- Entry type color badges ------------------------------------- */
.entry-type-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entry-type-badge--mod { background: rgba(52, 211, 153, 0.15); color: var(--prov-entry-mod); }
.entry-type-badge--maintenance { background: rgba(96, 165, 250, 0.15); color: var(--prov-entry-maintenance); }
.entry-type-badge--repair { background: rgba(251, 146, 60, 0.15); color: var(--prov-entry-repair); }
.entry-type-badge--note { background: rgba(167, 139, 250, 0.15); color: var(--prov-entry-note); }
.entry-type-badge--fuel { background: rgba(184, 151, 90, 0.15); color: var(--prov-gold); }
.entry-type-badge--expense { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }

/* -- Grid action buttons ----------------------------------------- */
.grid-action-btn {
    background: transparent;
    border: 1px solid var(--border-visible);
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}

.grid-action-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.grid-action-edit:hover {
    color: var(--prov-gold);
    border-color: var(--prov-gold);
}

.grid-action-delete:hover {
    color: #e57373;
    border-color: #e57373;
}

/* -- Tabs for entry import method -------------------------------- */
.import-method-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.import-method-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--border-visible);
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.import-method-tab:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.import-method-tab.active {
    background: var(--prov-gold);
    color: var(--prov-n900);
    border-color: var(--prov-gold);
}