/* Responsive Response Card view for mobile */

/* Form builder – accordion field cards */
.field-accordion-header {
    background-color: #f8f9fa;
    cursor: pointer;
    user-select: none;
    min-height: 2.75rem;
    transition: background-color 0.15s;
}
.field-accordion-header:hover {
    background-color: #eef0f3;
}
.field-drag-handle {
    cursor: grab;
    padding: 0.15rem 0.2rem;
    border-radius: 4px;
    transition: background-color 0.15s;
    display: inline-flex;
    align-items: center;
}
.field-drag-handle:hover {
    background-color: #dee2e6;
}
.field-drag-handle:active {
    cursor: grabbing;
}
.field-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: #6c757d;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}
.field-dragging {
    opacity: 0.45;
    box-shadow: 0 0 0 2px #0d6efd55 !important;
}
.field-drag-over {
    box-shadow: 0 0 0 2px #0d6efd !important;
    background-color: #e8f0fe !important;
}

/* Form builder field flash highlight */
@keyframes fieldFlash {
    0%   { background-color: rgba(253, 129, 13, 0.22); transform: scale(1.01); }
    40%  { background-color: rgba(253, 129, 13, 0.22); transform: scale(1); }
    65%  { background-color: rgba(253, 129, 13, 0.22); transform: scale(1.005); }
    100% { background-color: transparent;           transform: scale(1); }
}
.field-flash {
    animation: fieldFlash 5s;
}
@media (max-width: 767.98px) {
    .table-responsive.d-md-block {
        display: none !important;
    }
    #responsesCardContainer {
        display: block !important;
    }
}

#responsesCardContainer {
    margin-top: 1rem;
}

.response-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 24px -12px rgba(15,23,42,0.13);
    margin-bottom: 1.25rem;
    padding: 1.25rem 1rem;
    border: 1px solid #f1f3f9;
}
.response-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.response-card .card-meta {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}
.response-card .card-fields {
    font-size: 0.98rem;
    color: #495057;
    margin-bottom: 0.75rem;
}
.response-card .card-field-label {
    font-weight: 500;
    color: #0d6efd;
    margin-right: 0.5rem;
}
.response-card .card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.response-card .btn {
    font-size: 0.95rem;
    padding: 0.35rem 0.9rem;
    border-radius: 0.5rem;
}
/* Responsive DataTable to Card view for mobile */
@media (max-width: 767.98px) {
    .table-responsive.d-md-block {
        display: none !important;
    }
    #formsCardContainer,
    #deletedFormsCardContainer {
        display: block !important;
    }
}

#formsCardContainer,
#deletedFormsCardContainer {
    margin-top: 1rem;
}

.form-card, .deleted-form-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 24px -12px rgba(15,23,42,0.13);
    margin-bottom: 1.25rem;
    padding: 1.25rem 1rem;
    border: 1px solid #f1f3f9;
}
.form-card .card-title, .deleted-form-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.form-card .card-meta, .deleted-form-card .card-meta {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}
.form-card .card-desc {
    font-size: 0.98rem;
    color: #495057;
    margin-bottom: 0.75rem;
    max-height: 6rem;
    overflow: auto;
}
.form-card .card-status {
    margin-bottom: 0.5rem;
}
.form-card .card-actions, .deleted-form-card .card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.form-card .btn, .deleted-form-card .btn {
    font-size: 0.95rem;
    padding: 0.35rem 0.9rem;
    border-radius: 0.5rem;
}
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(18, 24, 40, 0.55);
    z-index: 1055;
    justify-content: center;
    align-items: center;
}

.loading-overlay.d-flex {
    display: flex !important;
}

.form-shell {
    max-width: 720px;
    margin: 0 auto;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.table-responsive {
    border-radius: 1rem;
    box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.35);
}

table.dataTable thead th {
    background: linear-gradient(120deg, #0d6efd, #6610f2);
    color: #fff;
    border-bottom: 0;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

table.dataTable tbody tr:nth-child(even) {
    background-color: rgba(13, 110, 253, 0.05);
}

table.dataTable tbody td,
table.dataTable tbody th {
    color: #0b1635;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
    color: #0b1635;
    font-weight: 500;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    color: #0b1635;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background-color: #fff;
    border-radius: 0.5rem;
    padding-inline: 0.75rem;
    padding-block: 0.4rem;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
    color: rgba(15, 23, 42, 0.45);
}

.dataTables_wrapper .dataTables_paginate {
    color: #0b1635;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px !important;
    padding-inline: 0.75rem !important;
    margin-inline: 0.25rem !important;
    color: #0b1635 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.12) !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: rgba(15, 23, 42, 0.35) !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .btn {
    border-radius: 0.75rem;
    border: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%) !important;
    padding: 0.45rem 1.2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.25s ease;
    box-shadow: 0 10px 24px -20px rgba(13, 110, 253, 0.7);
}

.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons .dt-button:focus,
.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .btn:focus {
    color: #fff !important;
    background: linear-gradient(135deg, #0b5ed7 0%, #5a17d6 100%) !important;
    box-shadow: 0 18px 32px -20px rgba(13, 110, 253, 0.85);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 999px;
    padding: 0.375rem 0.75rem;
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-weight: 600;
    font-size: 0.875rem;
}

.chip-neutral {
    background-color: rgba(108, 117, 125, 0.14);
    color: #495057;
}

.company-filter {
    padding: 0.25rem;
    background-color: #f8f9fa;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(13, 110, 253, 0.3);
    color: #0d6efd;
    font-weight: 500;
    background-color: #ffffff;
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.filter-pill:hover {
    background-color: rgba(13, 110, 253, 0.08);
    border-color: rgba(13, 110, 253, 0.5);
    box-shadow: 0 4px 12px -6px rgba(13, 110, 253, 0.4);
}

.filter-pill.is-active {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
    box-shadow: 0 6px 18px -8px rgba(13, 110, 253, 0.7);
}

.filter-pill.is-active:hover {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
}

.form-check-other {
    padding-left: 3rem;
}

.frosted-card {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 40px -25px rgba(15, 23, 42, 0.4);
}

.gradient-bg {
    background: radial-gradient(circle at top left, rgba(13, 110, 253, 0.18), transparent 45%),
                radial-gradient(circle at bottom right, rgba(255, 193, 7, 0.18), transparent 40%),
                linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);
}

.hero-title {
    font-size: clamp(1.75rem, 2.5vw, 2.75rem);
    font-weight: 700;
    color: #0b1635;
}

.hero-subtitle {
    color: #495057;
    max-width: 520px;
}

.card-cta {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-cta:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px -20px rgba(15, 23, 42, 0.35);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover,
.button:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -18px rgba(13, 110, 253, 0.8);
}

.checkable {
    margin-left: 0.5rem;
    font-weight: 500;
}

.sticky-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.95) 60%, rgba(255, 255, 255, 0));
    padding-top: 1rem;
}

.badge-soft-success {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.badge-soft-danger {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.badge-soft-warning {
    background-color: rgba(255, 193, 7, 0.12);
    color: #fd7e14;
}

.description-cell {
    max-width: 32rem;
}

.description-cell p {
    margin-bottom: 0.5rem;
}

.description-cell ul,
.description-cell ol {
    margin-bottom: 0.75rem;
}

/* Text contrast fixes */
.navbar-dark .btn-outline-light:hover,
.navbar-dark .btn-outline-light:focus {
    color: #0d6efd;
    background-color: #fff;
}

.navbar-dark .btn-light {
    color: #0d6efd;
    background-color: #fff;
    border-color: #fff;
}

.navbar-dark .btn-light:hover,
.navbar-dark .btn-light:focus {
    color: #0b5ed7;
    background-color: #f8f9fa;
}

.btn-go-back {
    background-color: #0d6efd !important;
    color: #fff !important;
    border: 1px solid #0d6efd !important;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-go-back:hover {
    background-color: #0b5ed7 !important;
    border-color: #0b5ed7 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.letter-spacing {
    letter-spacing: 0.08em;
}

.setup-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(248, 249, 255, 0.94);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.setup-loading-overlay.d-none {
    display: none !important;
}

.border-dashed {
    border-style: dashed !important;
}

.lucky-draw-setup .link-card {
    background: rgba(13, 110, 253, 0.04);
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 30px -24px rgba(13, 110, 253, 0.55);
    border-color: rgba(13, 110, 253, 0.25) !important;
}

.lucky-draw-setup .link-card .input-group .btn {
    min-width: 8rem;
}

.lucky-asset-preview {
    background: rgba(13, 110, 253, 0.06);
}

.lucky-asset-preview img,
.lucky-asset-preview video {
    max-height: 360px;
    object-fit: cover;
}

/* Custom remark column – inline note editing */
.custom-note-cell {
    cursor: default;
    min-width: 120px;
}
.custom-note-cell .custom-note-text {
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: 0.35rem;
    display: inline-block;
    transition: background 0.15s;
}
.custom-note-cell .custom-note-text:hover {
    background: rgba(13, 110, 253, 0.08);
}
.custom-note-cell .custom-note-input {
    min-width: 120px;
}
.custom-remark-col {
    min-width: 120px;
}