/**
 * Stylesheet for the KV Gateway OTP forms and Technician Portal.
 * v4.0.7 (UI Color Refresh): Implements branded colors for tabs and buttons, and a professional Kanban layout.
 */

/* ==========================================================================
   Common & Reusable Styles
   ========================================================================== */
.kvg-button { display: inline-block; padding: 10px 20px; border: none; border-radius: 5px; background-color: #0073aa; color: #ffffff; font-size: 1em; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.2s ease; }
.kvg-button:hover, .kvg-button:focus { background-color: #005a87; color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.kvg-button-secondary { background-color: #6c757d; }
.kvg-button-secondary:hover, .kvg-button-secondary:focus { background-color: #5a6268; }
.kvg-button-danger { background-color: #dc3545; }
.kvg-button-danger:hover, .kvg-button-danger:focus { background-color: #c82333; }
.kvg-button[disabled] { background-color: #a0a5aa; cursor: not-allowed; opacity: 0.7; transform: none; box-shadow: none; }

/* ==========================================================================
   OTP Unlock Form Styles (Customer & Technician)
   ========================================================================== */
.kvg-otp-container {
    max-width: 450px;
    margin: 50px auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-top: 5px solid #0073aa;
}
.kvg-otp-container h2 { margin-top: 0; }
.kvg-otp-unlock-form .kvg-form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.kvg-otp-unlock-form .kvg-form-group .kvg-button { width: 100%; padding-top: 12px; padding-bottom: 12px; }
.kvg-otp-unlock-form .kvg-otp-feedback { padding: 12px 15px; margin-bottom: 15px; border-radius: 4px; border: 1px solid transparent; font-size: 0.95em; display: none; }
.kvg-otp-unlock-form .kvg-otp-feedback.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.kvg-otp-unlock-form .kvg-otp-feedback.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }

/* ==========================================================================
   Technician Portal Specific Styles
   ========================================================================== */
.kvg-task-board-container { max-width: 1400px; margin: 20px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.kvg-task-board-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid #e6e6e6; padding-bottom: 15px; gap: 15px; }
.kvg-task-board-header h2 { margin: 0; }
.kvg-tech-welcome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.kvg-tech-welcome span { font-size: 1.1em; }
.kvg-tech-welcome .kvg-button { padding: 8px 14px; font-size: 0.9em; }
.kvg-task-toolbar { margin-left: auto; flex: 1 1 320px; max-width: 520px; }
.kvg-input-icon { position: relative; }
.kvg-input-icon input { width: 100%; padding: 10px 36px 10px 12px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.kvg-input-icon input:focus { outline: none; border-color: #6aa6ff; box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.15); }
.kvg-input-icon .icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6c757d; pointer-events: none; }

/* --- Supervisor Tab Styles --- */
.kvg-tabs { border-bottom: 1px solid #e6e6e6; margin-bottom: 25px; }
.kvg-tab-link { padding: 10px 16px; cursor: pointer; border: 1px solid transparent; border-bottom: 0; background-color: #f3f4f6; margin-bottom: -1px; border-radius: 6px 6px 0 0; font-size: 0.95em; transition: all 0.2s ease; color: #344054; }
.kvg-tab-link:hover { background-color: #e5e7eb; }
.kvg-tab-link.active { background-color: #ffffff; border-color: #e6e6e6; font-weight: 600; color: #111827; border-top-color: #6aa6ff; border-top-width: 3px; border-top-style: solid; }
.kvg-tab-content { display: none; }
.kvg-tab-content.active { display: block; }

/* --- Kanban-style Grid Layout & Task Cards --- */
.kvg-task-list { display: grid; grid-template-columns: 1fr; gap: 25px; }
@media (min-width: 1000px) { .kvg-task-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .kvg-task-list { grid-template-columns: repeat(3, 1fr); } }
.kvg-task-list-loading { text-align: center; color: #777; padding: 40px; }
.kvg-task-card { background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06); display: flex; flex-direction: column; border-left: 5px solid #6c757d; overflow: hidden; }
.kvg-task-card.status-new { border-left-color: #0073aa; }
.kvg-task-card.status-in-progress, .kvg-task-card.status-pending-approval { border-left-color: #fd7e14; }
.kvg-task-card-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid #eef1f4; background: linear-gradient(180deg, #fafafa, #ffffff); }
.kvg-task-card-title { font-size: 1.15em; font-weight: 600; margin: 0; color: #2c3338; }
.kvg-task-card-body { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }
.kvg-task-customer-info, .kvg-task-details { flex: 1; min-width: 250px; }
.kvg-task-customer-info h4, .kvg-task-details h4 { margin: 0 0 10px; font-size: 1em; color: #222; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.kvg-task-customer-info p { margin: 0 0 8px; font-size: 0.9em; color: #555; }
.kvg-task-customer-info p:last-child { margin-bottom: 0; }
.task-initial-notes { font-size: 0.95em; line-height: 1.5; }
.view-customer-history { font-size: 0.9em; text-decoration: none; font-weight: 600; color: #0073aa; }
.view-customer-history:hover { text-decoration: underline; }
.kvg-task-card-footer { margin-top: auto; padding: 12px 20px; border-top: 1px solid #eef1f4; display: flex; justify-content: space-between; align-items: center; background-color: #f9fafb; }
.kvg-task-card-status { font-weight: bold; font-size: 0.9em; }

/* --- Modal & Table Styles --- */
#kvg-task-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 1000;
        display: none; /* Let jQuery handle showing/hiding */
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
#kvg-task-modal-overlay.active { display:flex; opacity: 1; }
#kvg-task-modal-content { background: #fff; border-radius: 10px; padding: 28px; width: 92%; max-width: 860px; max-height: 90vh; overflow-y: auto; position: relative; transform: scale(0.98); transition: transform 0.2s ease; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
#kvg-task-modal-overlay.active #kvg-task-modal-content { transform: scale(1); }
#kvg-task-modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2.1em; cursor: pointer; color: #6b7280; line-height: 1; }
#kvg-task-modal-body h3 { margin-top: 0; }
.kvg-task-modal-section { margin-bottom: 25px; }
.kvg-task-modal-section label { display: block; font-weight: bold; margin-bottom: 8px; }
.kvg-task-modal-section select, .kvg-task-modal-section textarea, .kvg-task-modal-section input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; }
.kvg-task-modal-section textarea { min-height: 100px; }
.kvg-validated-input-wrapper { position: relative; }
.kvg-validated-input-wrapper .validation-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-weight: bold; }
.kvg-validated-input-wrapper .validation-icon.validating::after { content: '⏳'; }
.kvg-validated-input-wrapper .validation-icon.valid::after { content: '✓'; color: #28a745; }
.kvg-validated-input-wrapper .validation-icon.invalid::after { content: '✗'; color: #dc3545; }
.kvg-lookup-form .kvg-form-group { display:flex; gap: 10px; align-items: center; }
.kvg-lookup-results { margin-top: 20px; }
.kvg-snapshot-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px) { .kvg-snapshot-grid { grid-template-columns: repeat(2, 1fr); } }
.kvg-snapshot-section h4 { margin: 0 0 10px; font-size: 1.1em; color: #222; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.kvg-snapshot-list { list-style: none; padding: 0; margin: 0; }
.kvg-snapshot-list li { padding: 8px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; }
.kvg-snapshot-list li:last-child { border-bottom: none; }

/* ==========================================================================
   Unified Filter Bar Styles (Search, Selects, Chips)
   Used across technician portal and other UIs that adopt these classes
   ========================================================================== */
.kvg-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #ffffff; border: 1px solid #e6e6e6; border-radius: 8px; padding: 10px; }
.kvg-filter-group { display: flex; gap: 8px; align-items: center; }
.kvg-filter-spacer { flex: 1 1 auto; }
.kvg-input { padding: 10px 12px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; min-width: 200px; transition: border-color .2s ease, box-shadow .2s ease; }
.kvg-input:focus { outline: none; border-color: #6aa6ff; box-shadow: 0 0 0 3px rgba(68,138,255,.15); }
.kvg-select { appearance: none; -webkit-appearance: none; padding: 10px 36px 10px 12px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff url('data:image/svg+xml;utf8,<svg fill="%236b7280" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"/></svg>') no-repeat right 10px center/16px 16px; min-width: 160px; }
.kvg-select:focus { outline: none; border-color: #6aa6ff; box-shadow: 0 0 0 3px rgba(68,138,255,.15); }
.kvg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; background: #f3f4f6; color: #374151; font-size: .9em; border: 1px solid #e5e7eb; }
.kvg-chip .remove { background: transparent; border: 0; cursor: pointer; color: #6b7280; font-size: 1.1em; line-height: 1; }
.kvg-chip .remove:hover { color: #111827; }
.kvg-filter-actions .kvg-button { padding: 8px 12px; }