/* Déclaration de la police web 'zoho puvi' */
@font-face {
    font-family: 'zoho puvi';
    src: url('../fonts/Zoho Puvi Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'zoho puvi';
    src: url('../fonts/Zoho Puvi Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* --- Base Variables for Light Mode --- */
:root {
    --text-color: #333;
    --background-color: #fff;
    --border-color: #ccc;
    --header-bg-color: #f0f0f0;
    --drawer-bg-color: #fff;
    --filter-section-bg-color: #f9f9f9;
    --filter-button-bg-color: #eee;
    --filter-button-hover-bg-color: #ddd;
    --filter-button-active-bg-color: #ccc;
    --table-header-bg-color: #f2f2f2;
    --table-border-color: #ddd;
    --statement-row-bg-color: #e9e9e9;
    --skipped-text-color: #888;
    --json-pre-bg-color: #f9f9f9;
    --json-pre-border-color: #eee;
    --error-bg-color: #ffebeb;
    --error-border-color: red;
    --primary-blue: #007bff;
    --dark-blue: #0056b3;
    --light-blue-alpha: rgba(0, 123, 255, 0.1);
    --green-send: #28a745;
    --green-send-hover: #218838;
    --green-send-active: #1e7e34;
    --yellow-analyze: #ffc107;
    --yellow-analyze-hover: #e0a800;
    --yellow-analyze-active: #c69500;
    --stat-bg-color: #f8f9fa;
    --stat-border-color: #e9ecef;
    --stat-shadow-color: rgba(0, 0, 0, 0.08);
    --stat-label-color: #6c757d;

    /* Var pour les header des questionnaires */
    --drawer-header-bg-odd: #f0f0f0;
    --drawer-header-bg-even: #e0ffff;
}

/* --- Dark Mode Variables --- */
body.dark-mode {
    --text-color: #e0e0e0;
    --background-color: #1a1a1a;
    --border-color: #444;
    --header-bg-color: #2a2a2a;
    --drawer-bg-color: #222;
    --filter-section-bg-color: #252525;
    --filter-button-bg-color: #333;
    --filter-button-hover-bg-color: #444;
    --filter-button-active-bg-color: #555;
    --table-header-bg-color: #333;
    --table-border-color: #555;
    --statement-row-bg-color: #3a3a3a;
    --skipped-text-color: #999;
    --json-pre-bg-color: #282828;
    --json-pre-border-color: #3a3a3a;
    --error-bg-color: #4a1a1a;
    --error-border-color: #ff6666;
    --primary-blue: #66b3ff;
    --dark-blue: #3385ff;
    --light-blue-alpha: rgba(102, 179, 255, 0.15);
    --green-send: #4caf50;
    --green-send-hover: #388e3c;
    --green-send-active: #2e7d32;
    --yellow-analyze: #ffeb3b;
    --yellow-analyze-hover: #fbc02d;
    --yellow-analyze-active: #f9a825;
    --stat-bg-color: #2a2a2a;
    --stat-border-color: #444;
    --stat-shadow-color: rgba(0, 0, 0, 0.3);
    --stat-label-color: #a0a0a0;

    /* Var pour les header des questionnaire */
    --drawer-header-bg-odd: #282828;
    --drawer-header-bg-even: #343940;
}

html {
    font-size: 14px;
}

body {
    font-family: 'zoho puvi', 'sans-serif';
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Common UI Elements --- */
/* Consolidated border-radius and margin-bottom for similar blocks */
.questionnaire-drawer,
.filter-section,
.error-message-initial,
.error-message-recent-check {
    border-radius: 0.3125rem;
    margin-bottom: 0.625rem;
}

/* Consolidated border for elements that share it */
.questionnaire-drawer,
.filter-section,
.quick-filters button,
.filter-control input[type="date"],
.response-details input[type="number"],
.error-message-initial,
.error-message-recent-check,
.response-details-table th,
.response-details-table td,
.response-details-table pre.answer-json,
.stat-corner {
    border: 1px solid var(--border-color);
}

/* Consolidated padding for commonly padded sections */
.filter-section,
.drawer-header,
.error-message-initial,
.response-details-table pre.answer-json {
    padding: 0.625rem;
}

.response-details input[type="number"],
.filter-control input[type="date"],
.response-details button,
.quick-filters button {
    border-radius: 0.25rem;
    /* Slightly different from the larger blocks */
}

/* --- Drawer Specific Styles --- */
.drawer-header {
    background-color: var(--header-bg-color);
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    position: relative;
}

.drawer-header h2 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-info {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: 0.625rem;
    flex-shrink: 0;
}

.header-info>* {
    margin-right: 0.625rem;
}

.header-info button {
    cursor: pointer;
}

.header-info>span:last-child {
    margin-right: 0;
}

.recent-responses-indicator {
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--primary-blue);
    border-radius: 50%;
    margin-left: 0.3125rem;
    flex-shrink: 0;
}

.drawer-indicator {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 0.625rem;
    flex-shrink: 0;
}

.drawer-header.open .drawer-indicator {
    transform: rotate(180deg);
}

.drawer-content {
    padding: 0 0.625rem;
    background-color: var(--drawer-bg-color);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, background-color 0.3s ease;
}

.drawer-content.open {
    overflow-y: auto;
}

.drawer-content .loading-message,
.drawer-content .error-loading-message,
.drawer-content .no-responses-message {
    padding: 0.625rem 0;
    font-style: italic;
    color: var(--text-color);
}

.drawer-content .error-loading-message {
    color: var(--error-border-color);
    /* Used variable here for consistency */
}

/* --- Response Item Styles --- */
.response-item {
    border-top: 1px solid var(--border-color);
    padding-top: 0.625rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.response-item:first-child {
    border-top: none;
    padding-top: 0;
}

.response-item h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.response-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.response-details p {
    margin: 0;
    flex-shrink: 0;
    margin-right: 0.625rem;
}

.response-details form {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Consolidated gap here */
    margin: 0;
    padding: 0;
}

.response-details input[type="number"] {
    padding: 0.5rem 0.75rem;
    font-family: 'zoho puvi', 'sans-serif';
    font-size: 0.9em;
    box-sizing: border-box;
    min-width: 6.25rem;
    flex-grow: 1;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.response-details input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem var(--light-blue-alpha);
}

.response-details button {
    padding: 0.5rem 0.9375rem;
    border: none;
    font-family: 'zoho puvi', 'sans-serif';
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    color: white;
}

.response-details button.response_send {
    background-color: var(--green-send);
}

.response-details button.response_send:hover {
    background-color: var(--green-send-hover);
}

.response-details button.response_send:active {
    background-color: var(--green-send-active);
}

.response-details button.response_view {
    background-color: var(--primary-blue);
}

.response-details button.response_view:hover {
    background-color: var(--dark-blue);
}

.response-details button.response_view:active {
    background-color: #004085;
}

.response-details button.response_analyze {
    background-color: var(--yellow-analyze);
    color: var(--text-color);
}

.response-details button.response_analyze:hover {
    background-color: var(--yellow-analyze-hover);
}

.response-details button.response_analyze:active {
    background-color: var(--yellow-analyze-active);
}

.response-details button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Error Messages --- */
.error-message-initial,
.error-message-recent-check {
    color: var(--error-border-color);
    background-color: var(--error-bg-color);
}

.error-message-initial {
    margin-top: 0.625rem;
}

.error-message-recent-check {
    font-size: 0.9em;
    margin-bottom: 0.625rem;
    padding: 0.3125rem 0.625rem;
}

/* --- Recent Activity --- */
.recent-activity {
    display: inline-flex;
    align-items: center;
    margin-left: 0.9375rem;
    color: var(--dark-blue);
    font-weight: bold;
    flex-shrink: 0;
}

.recent-activity .icon-badge-wrapper {
    position: relative;
    display: inline-block;
    margin-right: 0.3125rem;
    font-size: 1.2em;
    line-height: 1;
}

.recent-activity .recent-responses-indicator {
    position: absolute;
    top: -0.1875rem;
    right: -0.1875rem;
    border: 1px solid var(--background-color);
    z-index: 1;
}

.drawer-header .recent-activity {
    display: none;
}

.drawer-header.has-recent-responses .recent-activity {
    display: inline-flex;
}

/* --- Filter section --- */
.filter-section {
    background-color: var(--filter-section-bg-color);
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    gap: 1.25rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quick-filters {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
    flex-basis: auto;
}

.quick-filters button {
    padding: 0.625rem;
    background-color: var(--filter-button-bg-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.3s ease;
    flex-shrink: 0;
    color: var(--text-color);
}

.quick-filters button:hover {
    background-color: var(--filter-button-hover-bg-color);
}

.quick-filters button:active {
    background-color: var(--filter-button-active-bg-color);
}

.filter-control {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
    flex-basis: auto;
}

.filter-control label {
    font-weight: bold;
    color: var(--text-color);
    flex-shrink: 0;
}

.filter-control input[type="date"] {
    padding: 0.5rem;
    flex-shrink: 0;
    min-width: 9.375rem;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- Response Pop-up Styles --- */
.modal-content-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.response-details-content {
    overflow-y: auto;
    margin-bottom: 0.625rem;
    padding-right: 0.3125rem;
    box-sizing: border-box;
    flex-basis: 1%;
    flex-grow: 1;
}

.response-actions-section {
    overflow-y: auto;
    box-sizing: border-box;
    flex-basis: auto;
}

.response-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    color: var(--text-color);
}

.response-details-table th,
.response-details-table td {
    padding: 0.1875rem;
    vertical-align: top;
    text-align: left;
    word-break: break-word;
}

.response-details-table th {
    background-color: var(--table-header-bg-color);
    font-weight: bold;
}

.response-details-table tr.field-statement td {
    background-color: var(--statement-row-bg-color);
    font-style: italic;
    font-weight: bold;
}

.response-details-table tr.skipped td {
    color: var(--skipped-text-color);
    font-style: italic;
}

.response-details-table td.subfield-title {
    padding-left: 1.875rem;
}

.response-details-table pre.answer-json {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: var(--json-pre-bg-color);
    border-radius: 0.25rem;
    overflow-x: auto;
    font-size: 0.9em;
}

.response-details-table a {
    color: var(--primary-blue);
    text-decoration: none;
}

.response-details-table a:hover {
    text-decoration: underline;
}

#swal2-html-container {
    max-height: 80vh;
}

/* --- Header & Stats Section --- */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative;
}

.stat-corner {
    display: flex;
    gap: 15px;
    background-color: var(--stat-bg-color);
    border-radius: 8px;
    padding: 15px 25px;
    box-shadow: 0 4px 12px var(--stat-shadow-color);
    align-self: flex-start;
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.stat-item {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 5px 0;
}

.stat-value {
    display: block;
    font-size: 2.2em;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.2;
    margin-bottom: 5px;
}

.stat-label {
    display: block;
    font-size: 0.9em;
    color: var(--stat-label-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.icon-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: var(--light-blue-alpha);
    z-index: 0;
}

.stat-item .stat-value,
.stat-item .stat-label {
    position: relative;
    z-index: 1;
}

/* Styling pour l'input de recherche */
#searchedTerm, #searchedForm {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-family: 'zoho puvi', sans-serif;
    font-size: 1em;
    background-color: var(--background-color);
    color: var(--text-color);
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    min-width: 300px;
    max-width: 100%;
}

#searchedTerm:focus, #searchedForm:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem var(--light-blue-alpha);
}

.filter-section button {
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    padding: 0.625rem;
    background-color: var(--filter-button-bg-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.3s ease;
    flex-shrink: 0;
    color: var(--text-color);
}

.filter-section button:hover {
    background-color: var(--filter-button-hover-bg-color);
}

.filter-section button:active {
    background-color: var(--filter-button-active-bg-color);
}

.quick-filters button.active-filter {
    background-color: #0056b3;
    color: white;
    border: 2px solid #003d82;
    font-weight: bold;
}