/* --- DataForce General Styles --- */
.dataforce-wrapper { 
    font-family: -apple-system, BlinkMacMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
    max-width: 960px; 
    margin: 20px auto; 
    padding: 0 15px; 
}
.dataforce-wrapper h2, .dataforce-wrapper h3 { 
    margin-top: 0; 
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.df-card { 
    background: #fff; 
    border: 1px solid #e2e4e7; 
    padding: 20px; 
    margin-bottom: 25px; 
    box-shadow: 0 1px 1px rgba(0,0,0,.04); 
    border-radius: 5px;
}
.df-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 15px;
}
.df-table th, .df-table td { 
    padding: 12px 15px; 
    text-align: left; 
    border-bottom: 1px solid #eee; 
    transition: background-color 0.3s ease-out; 
}
.df-table thead th { 
    background-color: #f7f7f7; 
    font-weight: 600; 
    color: #333;
}
.df-table tbody tr:hover td { 
    background-color: #f9f9f9; 
}
.df-table tbody tr:last-child td {
    border-bottom: none; 
}

/* --- Forms & Buttons --- */
.dataforce-wrapper form { 
    display: flex; 
    gap: 10px; 
    align-items: center; 
    flex-wrap: wrap; 
}
.dataforce-wrapper form input[type="text"], 
.dataforce-wrapper form input[type="email"], 
.dataforce-wrapper form input[type="password"],
.dataforce-wrapper form select { 
    padding: 8px 10px; 
    min-width: 200px; 
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    flex-grow: 1; 
    max-width: 100%; 
}
.dataforce-wrapper form .button {
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.dataforce-wrapper form .spinner { 
    float: none; 
    margin-left: 5px; 
    vertical-align: middle; 
}
.button-link-delete { 
    background: none!important; 
    border: none; 
    padding: 0!important; 
    color: #a00; 
    cursor: pointer; 
    text-decoration: underline; 
    font-size: inherit; 
}
.button-link-delete:hover { 
    color: #f00; 
}
.button-small { 
    padding: 2px 8px; 
    font-size: 12px; 
    height: auto; 
    line-height: 1.5; 
}

.df-delete-button {
    color: #a00 !important;
    border-color: #a00 !important;
    background: #f9f9f9 !important;
}
.df-delete-button:hover {
    background: #a00 !important;
    color: #fff !important;
}

.df-bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: flex-end; 
}

#api-test-result { 
    padding: 10px; 
    margin-top: 15px;
    border-left: 4px solid; 
    background-color: #f8f8f8;
    border-radius: 4px;
}
#api-test-result p {
    margin: 0;
}
#api-test-result.notice-success { border-left-color: #46b450; background-color: #e6ffe6; }
#api-test-result.notice-error { border-left-color: #dc3232; background-color: #ffe6e6; }
.spinner { 
    display: inline-block; 
    visibility: hidden; 
    vertical-align: middle; 
    width: 20px; 
    height: 20px;
}
.spinner.is-active { 
    visibility: visible; 
}
.df-row-highlight td { 
    background-color: #fffbe5 !important; 
}

#df-chart-container {
    padding: 20px;
    margin-bottom: 25px;
    background-color: #fff;
    border: 1px solid #e2e4e7;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    border-radius: 5px;
    position: relative; 
    height: 400px; 
}
#df-chart-container canvas {
    max-height: 100%;
    width: 100% !important; 
    height: 100% !important; 
}
#df-chart-container h3 {
    text-align: center;
    margin-bottom: 15px;
}