/* Custom styling for django-import-export buttons to match UNATU theme */

:root {
    --utm-primary: #ea580c; /* orange-600 */
    --utm-primary-hover: #c2410c; /* orange-700 */
    --utm-primary-active: #9a3412; /* orange-800 */
}

/* Style the Submit button on import form */
input[type="submit"],
button[type="submit"],
.submit-row input[type="submit"] {
    background: var(--utm-primary) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 6px 14px rgba(234, 88, 12, 0.25) !important;
    text-transform: none !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.submit-row input[type="submit"]:hover {
    background: var(--utm-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 20px rgba(234, 88, 12, 0.35) !important;
}

input[type="submit"]:active,
button[type="submit"]:active,
.submit-row input[type="submit"]:active {
    background: var(--utm-primary-active) !important;
    transform: translateY(0) !important;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.2) !important;
}

/* Style the CONFIRM IMPORT button specifically */
input[value="Confirm import"],
button:contains("Confirm"),
input[type="submit"][name="confirm"] {
    background: var(--utm-primary) !important;
    font-size: 16px !important;
    padding: 14px 28px !important;
}

/* Enhance the preview table */
.import-preview table,
table.import-preview {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.import-preview th,
table.import-preview th {
    background: var(--utm-primary) !important;
    color: #fff !important;
    padding: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.import-preview td,
table.import-preview td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.import-preview tr:hover,
table.import-preview tbody tr:hover {
    background: #fef3c7 !important;
}

/* Style the file upload zone from base.html template override */
.file-upload-wrapper {
    margin: 16px 0 !important;
}

/* Style messages/alerts */
.messagelist,
.messages {
    margin: 16px 0 !important;
}

.messagelist li,
.messages .success,
.messages .info {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #14532d !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.messagelist .error,
.messages .error {
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    color: #7f1d1d !important;
}

/* Style the confirmation text */
.import-preview-wrapper h3,
.import-preview-wrapper h2 {
    color: var(--utm-text, #0f172a) !important;
    font-weight: 800 !important;
    margin: 20px 0 12px 0 !important;
}

/* Style the back/cancel links to look like secondary buttons */
.cancel-link,
a[href*="changelist"] {
    display: inline-block !important;
    background: #64748b !important;
    color: #fff !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    margin-left: 12px !important;
    transition: all 0.2s ease !important;
}

.cancel-link:hover,
a[href*="changelist"]:hover {
    background: #475569 !important;
    transform: translateY(-1px) !important;
}