/* =====================================================
   CREATE TICKET DIALOG STYLES  –  Prefix: fxctk-
   ===================================================== */

.fxctk-dialog .mud-dialog {
    border: 2px solid #4B3E7B !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 80px rgba(75,62,123,.28) !important;
    max-width: 680px !important;
    width: 100% !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
}
.fxctk-dialog .mud-dialog-content {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}
.fxctk-dialog .mud-dialog-title { display: none !important; }

.fxctk-header {
    position: relative;
    background: linear-gradient(135deg, #1e1535 0%, #4B3E7B 60%, #7C3AED 100%);
    padding: 18px 22px 16px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    flex-wrap: wrap; flex-shrink: 0; overflow: hidden;
}
.fxctk-header-glow {
    position: absolute; top: -50px; right: -50px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(124,58,237,.40) 0%, transparent 70%);
    pointer-events: none;
}
.fxctk-header-left { display: flex; align-items: center; gap: 14px; position: relative; flex: 1; min-width: 0; }
.fxctk-header-icon {
    width: 46px; height: 46px; border-radius: 14px;
    background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.fxctk-header-title { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 17px; color: #fff; }
.fxctk-header-sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.60); margin-top: 2px; }

.fxctk-steps { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.fxctk-step {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.28); color: rgba(255,255,255,.40);
    font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .22s;
}
.fxctk-step-active { background: rgba(255,255,255,.22) !important; border-color: #fff !important; color: #fff !important; }
.fxctk-step-line { width: 28px; height: 2px; background: rgba(255,255,255,.18); flex-shrink: 0; transition: background .22s; }
.fxctk-line-active { background: rgba(255,255,255,.55) !important; }

.fxctk-error-banner {
    background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22);
    border-radius: 12px; margin: 12px 22px 0; padding: 10px 16px;
    font-size: 13px; font-weight: 600; color: #DC2626; flex-shrink: 0;
}

.fxctk-body { flex: 1; overflow-y: auto; padding: 20px 22px; min-height: 0; }
.fxctk-body::-webkit-scrollbar { width: 4px; }
.fxctk-body::-webkit-scrollbar-thumb { background: rgba(75,62,123,.18); border-radius: 2px; }

.fxctk-section-lbl {
    font-family: 'Poppins', sans-serif; font-weight: 900;
    font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
    color: #4B3E7B; margin-bottom: 12px;
}
.fxctk-busy { font-size: 12px; font-weight: 600; color: #9CA3AF; padding: 10px 0; }
.fxctk-info-msg {
    font-size: 13px; font-weight: 600; color: #9CA3AF;
    padding: 18px; text-align: center;
    background: #F9F8FF; border-radius: 14px;
    border: 1.5px dashed rgba(75,62,123,.18);
}

/* STEP 1 */
.fxctk-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fxctk-dept-card {
    position: relative; border: 2px solid rgba(75,62,123,.14);
    border-radius: 16px; padding: 16px 12px;
    text-align: center; cursor: pointer; background: #fff; transition: all .18s;
}
.fxctk-dept-card:hover { border-color: #4B3E7B; box-shadow: 0 4px 18px rgba(75,62,123,.13); transform: translateY(-2px); }
.fxctk-dept-sel { border-color: #4B3E7B !important; background: #F3F0FF !important; box-shadow: 0 4px 22px rgba(75,62,123,.18) !important; }
.fxctk-dept-icon { font-size: 28px; margin-bottom: 8px; }
.fxctk-dept-name { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12px; color: #2D2350; }
.fxctk-dept-check { position: absolute; top: 8px; right: 10px; font-size: 14px; font-weight: 900; color: #4B3E7B; }

.fxctk-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fxctk-tpl-card {
    border: 2px solid rgba(75,62,123,.12); border-radius: 16px;
    overflow: hidden; cursor: pointer; background: #fff; transition: all .18s;
}
.fxctk-tpl-card:hover { border-color: #4B3E7B; box-shadow: 0 6px 24px rgba(75,62,123,.14); transform: translateY(-2px); }
.fxctk-tpl-sel { border-color: #4B3E7B !important; background: #F3F0FF !important; box-shadow: 0 6px 24px rgba(75,62,123,.22) !important; }
.fxctk-tpl-stripe { height: 5px; }
.fxctk-stripe-p0 { background: linear-gradient(90deg,#EF4444,#F87171); }
.fxctk-stripe-p1 { background: linear-gradient(90deg,#F97316,#FB923C); }
.fxctk-stripe-p2 { background: linear-gradient(90deg,#EAB308,#FDE047); }
.fxctk-stripe-p3 { background: linear-gradient(90deg,#22C55E,#4ADE80); }
.fxctk-tpl-inner { padding: 12px; }
.fxctk-tpl-name { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 13px; color: #2D2350; margin-bottom: 8px; }
.fxctk-tpl-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.fxctk-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #F3F4F6; color: #6B7280; border: 1px solid rgba(0,0,0,.06); }
.fxctk-chip-outage { background: rgba(249,115,22,.08) !important; color: #C2410C !important; border-color: rgba(249,115,22,.18) !important; }
.fxctk-tpl-sel-lbl { margin-top: 8px; font-size: 11px; font-weight: 900; color: #4B3E7B; }

/* STEP 2/3 form */
.fxctk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.fxctk-field { display: flex; flex-direction: column; gap: 5px; }
.fxctk-field-full { grid-column: 1 / -1; }
.fxctk-field-has-err .fxctk-input,
.fxctk-field-has-err .fxctk-textarea,
.fxctk-field-has-err .fxctk-select { border-color: #EF4444 !important; }

.fxctk-lbl {
    font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; color: #4B3E7B;
    display: flex; align-items: center; gap: 5px;
}
.fxctk-req { color: #EF4444; }
.fxctk-type-tag {
    font-size: 9px; font-weight: 700; background: rgba(75,62,123,.10);
    color: #7C3AED; border-radius: 999px; padding: 1px 7px;
    margin-left: auto; text-transform: lowercase;
}
.fxctk-help-txt { font-size: 11px; font-weight: 500; color: #9CA3AF; }

.fxctk-input, .fxctk-textarea, .fxctk-select {
    border: 1.5px solid rgba(75,62,123,.20); border-radius: 12px;
    padding: 10px 13px; font-family: 'Poppins', sans-serif;
    font-size: 13px; font-weight: 500; color: #2D2350;
    background: #fff; outline: none;
    width: 100%; box-sizing: border-box;
    transition: border-color .16s, box-shadow .16s;
}
.fxctk-input:focus, .fxctk-textarea:focus, .fxctk-select:focus {
    border-color: #4B3E7B; box-shadow: 0 0 0 3px rgba(75,62,123,.09);
}
.fxctk-input[readonly], .fxctk-textarea[readonly] { background: #F8F8FC; color: #9CA3AF; cursor: not-allowed; }
.fxctk-textarea { resize: vertical; }
.fxctk-mono { font-family: ui-monospace, monospace !important; font-size: 12px !important; }
.fxctk-val-err { font-size: 11px; font-weight: 700; color: #DC2626; }

.fxctk-impact-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fxctk-impact-tile {
    flex: 1; min-width: 110px; display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; border: 2px solid rgba(75,62,123,.14); border-radius: 12px;
    cursor: pointer; font-family: 'Poppins', sans-serif;
    font-size: 12px; font-weight: 700; color: #6B7280; background: #fff; transition: all .16s;
}
.fxctk-impact-tile:hover { border-color: #4B3E7B; color: #4B3E7B; }
.fxctk-impact-sel {
    border-color: #4B3E7B !important; background: #F3F0FF !important;
    color: #4B3E7B !important; box-shadow: 0 2px 12px rgba(75,62,123,.15) !important;
}
.fxctk-impact-ico { font-size: 18px; }
.fxctk-impact-txt { font-weight: 800; }

.fxctk-multi-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.fxctk-multi-chip {
    display: flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 999px;
    border: 1.5px solid rgba(75,62,123,.16); background: #fff; cursor: pointer;
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; color: #6B7280; transition: all .15s;
}
.fxctk-multi-chip:hover { border-color: #4B3E7B; color: #4B3E7B; }
.fxctk-multi-on { background: #4B3E7B !important; color: #fff !important; border-color: #4B3E7B !important; }

.fxctk-toggle-row {
    display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none;
    padding: 10px 14px; border: 1.5px solid rgba(75,62,123,.14); border-radius: 12px;
    background: #fff; transition: border-color .15s; width: fit-content;
}
.fxctk-toggle-row:hover { border-color: #4B3E7B; }
.fxctk-toggle {
    width: 42px; height: 24px; border-radius: 999px;
    background: #D1D5DB; position: relative; transition: background .2s; flex-shrink: 0;
}
.fxctk-toggle-on { background: #4B3E7B !important; }
.fxctk-toggle-knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.20); transition: left .2s;
}
.fxctk-toggle-on .fxctk-toggle-knob { left: 21px !important; }
.fxctk-toggle-lbl { font-size: 13px; font-weight: 700; color: #2D2350; }

.fxctk-file-area { position: relative; }
.fxctk-file-native { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.fxctk-file-label {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px;
    border: 2px dashed rgba(75,62,123,.22); border-radius: 12px; cursor: pointer;
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; color: #6B7280;
    background: #F9F8FF; transition: all .16s;
}
.fxctk-file-label:hover { border-color: #4B3E7B; background: #F3F0FF; color: #4B3E7B; }
.fxctk-file-change {
    font-size: 10px; font-weight: 800; color: #7C3AED;
    background: rgba(124,58,237,.10); padding: 2px 8px; border-radius: 6px;
}

.fxctk-no-fields {
    display: flex; align-items: center; gap: 14px; padding: 28px 20px;
    border: 2px dashed rgba(75,62,123,.18); border-radius: 14px;
    background: #F9F8FF; font-size: 14px; font-weight: 600; color: #6B7280;
}

.fxctk-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px; border-top: 1px solid rgba(75,62,123,.09);
    background: #FAFAFA; flex-shrink: 0; flex-wrap: wrap; gap: 10px;
}
.fxctk-footer-nav { display: flex; align-items: center; gap: 10px; }
.fxctk-btn-cancel { color: #9CA3AF !important; font-weight: 700 !important; font-size: 12px !important; }
.fxctk-btn-cancel:hover { color: #4B3E7B !important; }
.fxctk-btn-back { color: #4B3E7B !important; font-weight: 800 !important; font-size: 13px !important; }
.fxctk-btn-next {
    background: linear-gradient(135deg, #4B3E7B, #7C3AED) !important; color: #fff !important;
    border: none !important; border-radius: 12px !important; font-weight: 800 !important;
    font-size: 13px !important; height: 40px !important; padding: 0 24px !important;
    box-shadow: 0 4px 16px rgba(75,62,123,.30) !important; transition: filter .16s !important;
}
.fxctk-btn-next:hover:not(:disabled) { filter: brightness(1.08) !important; }
.fxctk-btn-next:disabled { opacity: .42 !important; }
.fxctk-btn-submit {
    background: linear-gradient(135deg, #22C55E, #16A34A) !important; color: #fff !important;
    border: none !important; border-radius: 12px !important; font-weight: 800 !important;
    font-size: 13px !important; height: 40px !important; padding: 0 24px !important;
    box-shadow: 0 4px 16px rgba(34,197,94,.30) !important; transition: filter .16s !important;
}
.fxctk-btn-submit:hover:not(:disabled) { filter: brightness(1.08) !important; }
.fxctk-btn-submit:disabled { opacity: .5 !important; }

@media (max-width: 640px) {
    .fxctk-form-grid { grid-template-columns: 1fr; }
    .fxctk-field-full { grid-column: 1; }
    .fxctk-dept-grid { grid-template-columns: 1fr 1fr; }
    .fxctk-tpl-grid  { grid-template-columns: 1fr; }
    .fxctk-steps     { display: none; }
    .fxctk-impact-row { flex-direction: column; }
    .fxctk-footer    { flex-direction: column-reverse; }
    .fxctk-footer-nav { width: 100%; justify-content: flex-end; }
}