/* ŚCIEŻKA PLIKU: /wcm-data-workflow/assets/css/wcm-dworkflow-public.css */

/* ================================================= /
/ ===== GLOBALNE STYLE I ZMIENNE CSS (ROOT) ===== /
/ ================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');

:root {
--green-primary: #59B259;
--green-dark: #388E3C;
--green-light: #76C776;
--white-background: #FFFFFF;
--dark-grey-text: #292929;
--medium-grey-text: #4A5568;
--border-color-light: #E2E8F0;
--shadow-color-light: rgba(0, 0, 0, 0.05);
--field-color: #f0f0f0;
}

/* ================================================= /
/ ===== GŁÓWNY KONTENER I UKŁAD ===== /
/ ================================================= */

.wcm-dworkflow-plugin-wrapper {
position: relative;
}

.wcm-dworkflow-form-wrapper {
margin: clamp(20px, 4vw, 40px) auto;
max-width: 900px;
padding: clamp(20px, 4vw, 30px);
font-family: 'Inter', sans-serif;
color: var(--dark-grey-text);
background-color: var(--white-background);
border-radius: 20px;
box-shadow: 0 10px 40px var(--shadow-color-light);
position: relative;
}

/* ================================================= /
/ ===== ZEGAR (SHORTCODE) ===== /
/ ================================================= */

.wcm-dworkflow-clock-standalone {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.9em;
font-weight: 500;
color: var(--medium-grey-text);
background-color: #f8f9fa;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid var(--border-color-light);
vertical-align: middle;
}

.wcm-dworkflow-clock-standalone svg {
width: 1em;
height: 1em;
opacity: 0.7;
}

/* ================================================= /
/ ===== STYLE PÓL FORMULARZA ===== /
/ ================================================= */

.wcm-dworkflow-form .form-row {
margin-bottom: clamp(15px, 2.5vw, 20px);
}

.wcm-dworkflow-form label {
font-weight: 500;
margin-bottom: 12px !important;
color: var(--dark-grey-text);
font-size: clamp(1em, 1.2vw, 1.1em);
font-family: 'Poppins', sans-serif;
display: block;
}

.wcm-dworkflow-form input[type="text"],
.wcm-dworkflow-form input[type="email"],
.wcm-dworkflow-form input[type="date"],
.wcm-dworkflow-form input[type="number"],
.wcm-dworkflow-form select,
.wcm-dworkflow-form textarea {
width: 100%;
padding: clamp(10px, 2.5vw, 12px) clamp(15px, 3.5vw, 20px);
border: 2px solid var(--border-color-light);
border-radius: 12px;
font-size: 0.9rem !important;
min-height: 50px;
box-sizing: border-box;
transition: all 0.3s ease;
background-color: var(--white-background);
color: var(--dark-grey-text);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.wcm-dworkflow-form input[type="text"]:focus,
.wcm-dworkflow-form input[type="email"]:focus,
.wcm-dworkflow-form input[type="date"]:focus,
.wcm-dworkflow-form input[type="number"]:focus,
.wcm-dworkflow-form select:focus,
.wcm-dworkflow-form textarea:focus {
border-color: var(--green-primary);
box-shadow: 0 0 0 4px rgba(89, 178, 89, 0.25), inset 0 2px 4px rgba(0,0,0,0.06);
outline: none;
background-color: var(--field-color) !important;
}

.wcm-dworkflow-form select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1.25em top 50%;
background-size: 1rem auto;
}

.wcm-dworkflow-form textarea {
resize: vertical;
min-height: 120px;
}

.wcm-dworkflow-form h3 {
text-align: left;
color: var(--green-primary);
margin: clamp(20px, 4vw, 30px) 0px clamp(10px, 2vw, 15px);
font-size: clamp(1.1em, 1.5vw, 1.3em);
text-transform: uppercase;
font-weight: 600;
font-family: 'Poppins', sans-serif;
border-bottom: 2px solid var(--border-color-light);
padding-bottom: clamp(8px, 2vw, 10px);
}

.wcm-dworkflow-form .checkbox-option {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.wcm-dworkflow-form .checkbox-option input {
margin-right: 12px;
width: 20px;
height: 20px;
}
.wcm-dworkflow-form .no-attachment-row label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 400;
font-family: 'Inter', sans-serif;
}
.wcm-dworkflow-form .no-attachment-row input {
width: 20px;
height: 20px;
}

/* NOWY STYL DLA KOMUNIKATU O PRZEKROCZENIU LIMITU */
.wcm-limit-exceeded-message {
    font-size: 1em;
    font-weight: 600;
    color: #b91c1c; /* Kolor błędu */
    background-color: #fee2e2; /* Tło błędu */
    padding: 15px 20px;
    border-radius: 12px;
    margin-top: 20px;
    text-align: center;
    border: 1px solid #fca5a5;
    display: none; /* Domyślnie ukryty */
}


/* ================================================= /
/ ===== DYNAMICZNE DODAWANIE PLIKÓW ===== /
/ ================================================= */

.wcm-file-upload-area {
border: 2px dashed var(--border-color-light);
border-radius: 12px;
padding: clamp(15px, 3.5vw, 20px);
text-align: center;
}

.wcm-file-list {
margin-bottom: clamp(10px, 2.5vw, 15px);
text-align: left;
}

.wcm-file-list-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--field-color);
padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 15px);
border-radius: 8px;
margin-bottom: 8px;
font-size: 0.9em;
}

.wcm-file-name {
color: var(--dark-grey-text);
}

.wcm-remove-file-btn {
background: none;
border: none;
color: #cc0000;
font-size: 1.2em;
cursor: pointer;
padding: 0 5px;
line-height: 1;
}

.wcm-add-file-btn {
display: inline-block;
padding: clamp(8px, 2vw, 10px) clamp(15px, 3.5vw, 20px);
background-color: #f0f0f0;
color: var(--dark-grey-text);
border: 1px solid var(--border-color-light);
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.wcm-add-file-btn:hover {
background-color: var(--border-color-light);
border-color: #ccc;
}

/* ================================================= /
/ ===== PRZYCISKI ===== /
/ ================================================= */

.wcm-dworkflow-submit-btn,
.wcm-dworkflow-frontend-archive .button {
display: block;
width: 100%;
max-width: 400px;
padding: clamp(12px, 3vw, 15px) clamp(20px, 4vw, 25px);
background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
color: white;
border: none;
border-radius: 15px;
font-size: clamp(1em, 1.2vw, 1.1em);
font-weight: 700;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-transform: uppercase;
letter-spacing: 1.5px;
box-shadow: 0 10px 20px rgba(89, 178, 89, 0.3);
margin: clamp(25px, 5vw, 40px) auto 0;
text-align: center;
}

.wcm-dworkflow-submit-btn:hover,
.wcm-dworkflow-frontend-archive .button:not(.button-delete):hover {
background: linear-gradient(135deg, var(--green-light), var(--green-dark));
box-shadow: 0 15px 30px rgba(89, 178, 89, 0.4);
transform: translateY(-5px);
}

.wcm-dworkflow-submit-btn:disabled {
background: #cccccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

/* ================================================= /
/ ===== EKRAN ŁADOWANIA I KOMUNIKATY MODALNE ===== /
/ ================================================= */

.wcm-dworkflow-loading-overlay,
.wcm-dworkflow-message-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(29, 29, 29, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.wcm-dworkflow-loading-overlay.is-active,
.wcm-dworkflow-message-overlay.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.wcm-dworkflow-loading-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
}

.wcm-dworkflow-spinner {
width: 50px;
height: 50px;
border: 5px solid #FFD000;
border-top: 5px solid #00F7FC;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.wcm-dworkflow-loading-text {
font-weight: 600;
color: var(--white-background);
font-size: clamp(1em, 1.2vw, 1.2em);
}

.wcm-dworkflow-message-box {
background-color: var(--white-background);
padding: clamp(20px, 4vw, 30px) clamp(30px, 6vw, 40px);
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
text-align: center;
max-width: 450px;
width: 90%;
}

.wcm-dworkflow-message-box .wcm-message-content {
font-size: clamp(1em, 1.2vw, 1.1em);
font-weight: 500;
margin-bottom: clamp(15px, 2.5vw, 25px);
line-height: 1.6;
}

.wcm-dworkflow-message-box.success .wcm-message-content {
color: #2E7D32;
}

.wcm-dworkflow-message-box.error .wcm-message-content {
color: #B91C1C;
}

.wcm-dworkflow-message-box .wcm-message-close-btn {
padding: clamp(8px, 2vw, 10px) clamp(20px, 4vw, 30px);
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s;
}

.wcm-dworkflow-message-box.success .wcm-message-close-btn {
background-color: var(--green-primary);
color: white;
}
.wcm-dworkflow-message-box.success .wcm-message-close-btn:hover {
background-color: var(--green-dark);
}

.wcm-dworkflow-message-box.error .wcm-message-close-btn {
background-color: #EF4444;
color: white;
}
.wcm-dworkflow-message-box.error .wcm-message-close-btn:hover {
background-color: #B91C1C;
}

/* ================================================= /
/ ===== KOMUNIKATY (NOTICE) ===== /
/ ================================================= */

.wcm-dworkflow-notice {
padding: clamp(12px, 3vw, 15px) clamp(15px, 4vw, 20px);
margin-bottom: clamp(20px, 4vw, 25px);
border-radius: 12px;
font-weight: 500;
border: 1px solid transparent;
font-family: 'Inter', sans-serif;
}

.wcm-dworkflow-notice.success {
background-color: #E8F5E9;
border-color: #A5D6A7;
color: #2E7D32;
}

.wcm-dworkflow-notice p {
margin: 0;
padding: 0;
}

/* ================================================= /
/ ===== ARCHIWUM NA FRONCIE ===== /
/ ================================================= */

.wcm-dworkflow-frontend-archive {
margin: clamp(20px, 4vw, 40px) auto;
max-width: 900px;
padding: clamp(20px, 4vw, 30px);
font-family: 'Inter', sans-serif;
background-color: var(--white-background);
border-radius: 20px;
box-shadow: 0 10px 40px var(--shadow-color-light);
}

.wcm-dworkflow-frontend-archive h2 {
text-align: left;
color: var(--green-primary);
margin: 0 0 clamp(15px, 3vw, 25px);
font-size: clamp(1.2em, 2vw, 1.5em);
font-weight: 600;
font-family: 'Poppins', sans-serif;
border-bottom: 2px solid var(--border-color-light);
padding-bottom: clamp(10px, 2.5vw, 15px);
}

.wcm-archive-table {
width: 100%;
border-collapse: collapse;
border: none;
}

.wcm-archive-table th,
.wcm-archive-table td {
padding: clamp(10px, 3vw, 15px);
text-align: left;
border-bottom: 1px solid var(--border-color-light);
}

/* Nowe style dla kolumny Akcje */
.wcm-archive-table th:last-child,
.wcm-archive-table td:last-child {
text-align: center;
}

/* Stylizacja przycisków akcji */
.wcm-archive-table td:last-child a,
.wcm-archive-table td:last-child button {
margin: 5px auto;
}

.wcm-archive-table thead th {
background-color: transparent;
font-weight: 600;
font-family: 'Poppins', sans-serif;
color: var(--medium-grey-text);
font-size: clamp(0.8em, 1.2vw, 0.9em);
text-transform: uppercase;
}

.wcm-archive-table tbody tr:hover {
background-color: #f9f9f9;
}

.wcm-archive-table .button {
padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 15px);
text-decoration: none;
background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
border: none;
color: white;
border-radius: 10px;
font-size: clamp(0.8em, 1.2vw, 0.9em);
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.wcm-archive-table .button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(89, 178, 89, 0.2);
}

.wcm-archive-table .button.button-show-data {
background: #0073aa;
}
.wcm-archive-table .button.button-show-data:hover {
background: #005f88;
}

.wcm-archive-table .button.button-delete {
background: #E53E3E;
}
.wcm-archive-table .button.button-delete:hover {
background: #C53030;
box-shadow: 0 4px 15px rgba(229, 62, 62, 0.2);
}

.status-badge {
padding: clamp(4px, 1vw, 5px) clamp(10px, 2vw, 12px);
border-radius: 15px;
font-size: 12px;
font-weight: 600;
color: #fff;
text-transform: capitalize;
}
.status-badge.status-nowe { background-color: #0073aa; }
.status-badge.status-w-realizacji { background-color: #ffb900; color: #333; }
.status-badge.status-zakończone { background-color: #46b450; }

.data-details-row {
display: none;
animation: fadeIn 0.5s ease-in-out;
}
.data-details-row td {
padding: 0;
}
.data-details-container {
background-color: #fafafa;
padding: clamp(15px, 3.5vw, 20px);
border-radius: 10px;
margin: clamp(5px, 1vw, 10px) 0;
line-height: 1.6;
}
.submission-data-grid {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
}
.data-row-item {
display: flex;
justify-content: space-between;
width: 100%;
}
.data-label {
font-weight: 600;
color: var(--green-primary);
text-align: left;
}
.data-value {
text-align: right;
white-space: pre-wrap;
word-break: break-word;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}

/* ================================================= /
/ ===== MEDIA QUERIES (RESPONSYWNOŚĆ) ===== /
/ ================================================= */
@media (max-width: 768px) {
.wcm-dworkflow-form-wrapper,
.wcm-dworkflow-frontend-archive {
margin: clamp(10px, 3vw, 20px) 15px;
padding: clamp(15px, 4vw, 20px);
}

.wcm-dworkflow-form input[type="text"],
.wcm-dworkflow-form input[type="email"],
.wcm-dworkflow-form input[type="date"],
.wcm-dworkflow-form input[type="number"],
.wcm-dworkflow-form select,
.wcm-dworkflow-form textarea {
    font-size: 1rem !important;
}

.wcm-archive-table thead {
    display: none;
}
.wcm-archive-table, .wcm-archive-table tbody, .wcm-archive-table tr, .wcm-archive-table td {
    display: block;
    width: 100%;
}
.wcm-archive-table tr {
    margin-bottom: 15px;
    border: 1px solid var(--border-color-light);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wcm-archive-table td {
    text-align: right;
    padding-left: 0;
    position: relative;
    border-bottom: 1px dotted var(--border-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wcm-archive-table td:last-child {
    border-bottom: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    align-items: center;
}
.wcm-archive-table td:before {
    content: attr(data-label);
    position: static;
    width: auto;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: var(--medium-grey-text);
}
.wcm-archive-table td .button-show-data,
.wcm-archive-table td .button-secondary {
    width: 100%;
    margin: 0;
}
.data-details-row td {
    padding-left: 0;
}
.data-details-row td:before {
    display: none;
}
.submission-data-grid {
    display: flex;
    flex-direction: column;
}
.data-row-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    border-bottom: 1px dashed var(--border-color-light);
}
.data-row-item:last-child {
    border-bottom: none;
}
.data-label,
.data-value {
    text-align: left;
}
.data-value {
    width: 60%;
    text-align: right;
}
.data-details-row {
    display: block !important;
}
.wcm-archive-table tr:has(.data-details-row) {
    display: block;
}

}

}