/* ============================================================
   Hanuman PropWorks — land-submit.css v2.3.0
   Land Submission Form + Pipeline Admin
   โทนสีเขียวเข้ม construction.co.th
============================================================ */

/* ---- SUBMISSION FORM WRAPPER ---- */
.hpw-submit-wrapper {
    --green-dark:  var(--hpw-brand-deep);
    --green-main:  var(--hpw-brand-ink);
    --green-mid:   #1D9E75;
    --green-light: #27c48f;
    --green-glow:  rgba(29,158,117,.12);
    --white:       #ffffff;
    --off-white:   #f4f9f6;
    --gray-light:  #e8f0eb;
    --text-dark:   #1a2e25;
    --gray-text:   #4a6357;
    --gold:        #c9a84c;
    --red:         #e05050;
    --radius:      10px;
    --font:        var(--hpw-font);

    font-family: var(--font);
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 40px rgba(var(--hpw-brand-deep-rgb),.15);
    max-width: 860px;
    margin: 0 auto;
    border: 1px solid var(--gray-light);
}

/* ---- HEADER ---- */
.hpw-submit-header {
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main) 100%);
    padding: 24px 28px 0;
    color: var(--white);
}

.hpw-submit-logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.hpw-submit-logo {
    height: 44px;
    width: auto;
    filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

.hpw-submit-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--green-light);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.hpw-submit-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--white);
    margin: 0 0 6px;
    line-height: 1.2;
}

.hpw-submit-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    margin: 0;
    line-height: 1.6;
}

/* ---- PROGRESS STEPS ---- */
.hpw-submit-progress {
    padding: 20px 0 0;
    overflow-x: auto;
}

.hpw-submit-steps {
    display: flex;
    align-items: center;
    min-width: 500px;
    padding-bottom: 20px;
}

.hpw-submit-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.hpw-step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,.6);
    transition: all .3s;
}

.hpw-submit-step.active .hpw-step-circle,
.hpw-submit-step.done .hpw-step-circle {
    background: var(--green-light);
    border-color: var(--green-light);
    color: var(--green-dark);
}

.hpw-step-label {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    font-weight: 600;
    transition: color .3s;
}

.hpw-submit-step.active .hpw-step-label,
.hpw-submit-step.done .hpw-step-label {
    color: var(--white);
}

.hpw-submit-step-line {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,.2);
    margin: 0 8px;
    margin-bottom: 22px;
    transition: background .3s;
}

.hpw-submit-step-line.done {
    background: var(--green-light);
}

/* ---- BODY / PANELS ---- */
.hpw-submit-body {
    padding: 28px;
}

.hpw-submit-panel {
    display: none;
}

.hpw-submit-panel.active {
    display: block;
}

.hpw-submit-panel-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--green-main);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-light);
}

/* ---- FORM GRID ---- */
.hpw-submit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.hpw-submit-full { grid-column: 1 / -1; }

.hpw-submit-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-text);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.hpw-req { color: var(--red); }

.hpw-submit-input,
.hpw-submit-select {
    width: 100%;
    border: 1.5px solid var(--gray-light);
    border-radius: 7px;
    background: var(--white);
    color: var(--text-dark);
    font-family: var(--font);
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.hpw-submit-input:focus,
.hpw-submit-select:focus {
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}

.hpw-submit-input::placeholder { color: #bbb; }

.hpw-submit-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

.hpw-submit-hint {
    font-size: 11px;
    color: var(--gray-text);
    margin-top: 4px;
    line-height: 1.5;
}

/* ---- Section label inside grid ---- */
.hpw-submit-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--green-main);
    border-bottom: 1px solid var(--gray-light);
    padding-bottom: 5px;
    margin-top: 4px;
}

/* ---- Area row ---- */
.hpw-submit-area-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.hpw-submit-area-item {
    flex: 1;
    min-width: 80px;
}

.hpw-submit-area-item label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-text);
    margin-bottom: 4px;
}

.hpw-submit-area-sep {
    color: var(--gray-text);
    font-size: 16px;
    padding-bottom: 10px;
    flex-shrink: 0;
}

.hpw-area-or {
    font-size: 12px;
    color: var(--green-main);
    font-weight: 700;
}

/* ---- Checkbox grid ---- */
.hpw-submit-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hpw-submit-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
    background: var(--off-white);
    border: 1.5px solid var(--gray-light);
    border-radius: 7px;
    padding: 8px 14px;
    transition: border-color .15s, background .15s;
    user-select: none;
}

.hpw-submit-checkbox input[type="checkbox"] {
    accent-color: var(--green-mid);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.hpw-submit-checkbox:has(input:checked) {
    border-color: var(--green-mid);
    background: var(--green-glow);
}

/* ---- Deal type cards ---- */
.hpw-submit-deal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.hpw-submit-deal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    border: 2px solid var(--gray-light);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
    background: var(--white);
}

.hpw-submit-deal-card input { display: none; }

.hpw-submit-deal-card:has(input:checked) {
    border-color: var(--green-mid);
    background: var(--green-glow);
}

.hpw-deal-icon { font-size: 24px; margin-bottom: 6px; }
.hpw-deal-label { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.hpw-deal-desc  { font-size: 11px; color: var(--gray-text); margin-top: 3px; }

/* ---- Upload zones ---- */
.hpw-submit-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.hpw-submit-upload-zone {
    border: 2px dashed var(--gray-light);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    position: relative;
}

.hpw-submit-upload-zone:hover {
    border-color: var(--green-mid);
    background: var(--green-glow);
}

.hpw-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.hpw-upload-icon  { font-size: 28px; margin-bottom: 6px; }
.hpw-upload-label { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.hpw-upload-hint  { font-size: 11px; color: var(--gray-text); margin-top: 3px; }

.hpw-upload-list {
    margin-top: 10px;
    text-align: left;
}

.hpw-upload-list-item {
    font-size: 12px;
    color: var(--green-main);
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---- Summary box ---- */
.hpw-submit-summary {
    background: var(--off-white);
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.hpw-submit-summary-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--green-main);
    margin-bottom: 12px;
}

.hpw-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px solid var(--gray-light);
    color: var(--text-dark);
}

.hpw-summary-row:last-child { border-bottom: none; }
.hpw-summary-row span:first-child { color: var(--gray-text); }
.hpw-summary-row span:last-child  { font-weight: 700; }

/* ---- Consent ---- */
.hpw-submit-consent {
    background: rgba(29,158,117,.06);
    border: 1px solid rgba(29,158,117,.2);
    border-radius: 7px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-dark);
}

.hpw-submit-consent a { color: var(--green-main); }

/* ---- Navigation buttons ---- */
.hpw-submit-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-light);
}

.hpw-submit-btn-next,
.hpw-submit-btn-back,
.hpw-submit-btn-submit {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    padding: 11px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}

.hpw-submit-btn-next:hover,
.hpw-submit-btn-submit:hover { opacity: .87; transform: translateY(-1px); }
.hpw-submit-btn-back:hover   { opacity: .75; }

.hpw-submit-btn-next,
.hpw-submit-btn-submit {
    background: var(--green-main);
    color: var(--white);
}

.hpw-submit-btn-submit {
    background: linear-gradient(135deg, var(--green-main), var(--green-mid));
    font-size: 15px;
    padding: 13px 32px;
}

.hpw-submit-btn-back {
    background: var(--off-white);
    color: var(--gray-text);
    border: 1.5px solid var(--gray-light);
}

/* ---- Submit message ---- */
.hpw-submit-msg {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    min-height: 20px;
}

.hpw-submit-msg.error   { color: var(--red); }
.hpw-submit-msg.success { color: var(--green-main); }

/* ---- Success state ---- */
.hpw-submit-success {
    text-align: center;
    padding: 48px 24px;
}

.hpw-success-icon  { font-size: 56px; margin-bottom: 16px; }
.hpw-success-title { font-size: 22px; font-weight: 800; color: var(--green-main); margin: 0 0 12px; }
.hpw-success-ref   { font-size: 14px; color: var(--gray-text); margin-bottom: 16px; }
.hpw-success-ref strong { color: var(--green-main); font-size: 18px; }
.hpw-success-body  { font-size: 14px; color: var(--gray-text); line-height: 1.8; }

/* ---- Footer ---- */
.hpw-submit-footer {
    background: var(--off-white);
    border-top: 1px solid var(--gray-light);
    padding: 10px 20px;
    font-size: 11px;
    color: var(--gray-text);
    text-align: center;
}

/* ============================================================
   PIPELINE ADMIN — Kanban Board
============================================================ */
.hpw-pipeline-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--slate);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.hpw-pipeline-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.hpw-pipeline-view-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.hpw-view-btn {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: color .15s, background .15s;
}

.hpw-view-btn:hover { color: var(--text); }
.hpw-view-btn.active { background: var(--gold); color: #0d1b2a; }

/* ---- Kanban board ---- */
.hpw-kanban-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
}

.hpw-kanban-col {
    flex: 0 0 240px;
    background: var(--slate);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.hpw-kanban-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(0,0,0,.2);
}

.hpw-kanban-col-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.hpw-kanban-col-count {
    background: rgba(255,255,255,.15);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
}

.hpw-kanban-cards {
    padding: 10px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hpw-kanban-empty {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 16px 0;
}

/* ---- Kanban card ---- */
.hpw-kanban-card {
    background: var(--mid);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 7px;
    padding: 12px;
    cursor: pointer;
    transition: box-shadow .15s;
}

.hpw-kanban-card.priority-high   { border-left-color: var(--yellow); }
.hpw-kanban-card.priority-urgent { border-left-color: var(--red); }
.hpw-kanban-card.priority-normal { border-left-color: var(--green); }
.hpw-kanban-card.priority-low    { border-left-color: var(--muted); }
.hpw-kanban-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.3); }

.hpw-card-ref     { font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--gold); margin-bottom: 4px; }
.hpw-card-name    { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.hpw-card-location{ font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.hpw-card-area    { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.hpw-card-deal    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hpw-card-deal-badge { font-size: 10px; background: rgba(201,168,76,.15); color: var(--gold); border: 1px solid rgba(201,168,76,.3); padding: 1px 6px; border-radius: 4px; }
.hpw-card-price   { font-size: 11px; font-weight: 700; color: var(--green); }
.hpw-card-date    { font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.hpw-card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.hpw-card-btn {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    text-decoration: none;
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.3);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ---- Detail page ---- */
.hpw-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 16px 18px;
    background: var(--slate);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.hpw-detail-ref {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.hpw-detail-controls {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.hpw-detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hpw-settings-full { grid-column: 1 / -1; }

.hpw-detail-rows { display: flex; flex-direction: column; gap: 8px; }

.hpw-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(46,74,104,.3);
}

.hpw-detail-row:last-child { border-bottom: none; }
.hpw-detail-label { color: var(--muted); font-weight: 500; }
.hpw-detail-value { font-weight: 700; color: var(--text); text-align: right; }
.hpw-detail-link  { color: var(--gold); text-decoration: none; font-weight: 700; }

/* ---- Files grid ---- */
.hpw-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.hpw-file-card {
    background: var(--mid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
}

.hpw-file-thumb {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
    display: block;
}

.hpw-file-icon-wrap { display: block; }
.hpw-file-icon  { font-size: 36px; margin-bottom: 8px; }
.hpw-file-name  { font-size: 11px; color: var(--text); font-weight: 600; word-break: break-all; margin-bottom: 3px; }
.hpw-file-meta  { font-size: 10px; color: var(--muted); }

/* ---- Timeline ---- */
.hpw-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
}

.hpw-timeline-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(46,74,104,.3);
}

.hpw-timeline-item:last-child { border-bottom: none; }
.hpw-timeline-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }

.hpw-timeline-header {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.hpw-timeline-type  { font-size: 12px; font-weight: 700; color: var(--gold); }
.hpw-timeline-who   { font-size: 12px; color: var(--muted); }
.hpw-timeline-when  { font-size: 11px; color: var(--muted); margin-left: auto; }
.hpw-timeline-text  { font-size: 13px; color: var(--text); line-height: 1.6; }

/* ---- Analysis section ---- */
.hpw-analysis-params {
    background: var(--mid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
    .hpw-submit-body { padding: 20px 16px; }
    .hpw-submit-grid { grid-template-columns: 1fr; }
    .hpw-submit-deal-grid { grid-template-columns: 1fr 1fr; }
    .hpw-submit-upload-grid { grid-template-columns: 1fr; }
    .hpw-kanban-board { flex-direction: column; }
    .hpw-kanban-col { flex: none; width: 100%; }
    .hpw-detail-info-grid { grid-template-columns: 1fr; }
    .hpw-detail-header { flex-direction: column; }
}