/**
 * Public-facing styles for the WP FTP Directory Viewer
 */

/* Container */
.wftpdv-container {
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Loading indicator */
.wftpdv-loading {
    display: none;
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #666;
}

.wftpdv-container.is-loading .wftpdv-loading {
    display: block;
}

.wftpdv-container.is-loading .wftpdv-listing-wrapper {
    opacity: 0.5;
}

/* Error message */
.wftpdv-error {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #f5c2c7;
    border-radius: 4px;
    background-color: #f8d7da;
    color: #842029;
}

/* Breadcrumb navigation */
.wftpdv-breadcrumb {
    margin-bottom: 15px;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    white-space: nowrap;
    overflow-x: auto;
}

.wftpdv-breadcrumb-item a {
    color: #0d6efd;
    text-decoration: none;
}

.wftpdv-breadcrumb-item a:hover {
    text-decoration: underline;
}

.wftpdv-breadcrumb-separator {
    margin: 0 5px;
    color: #6c757d;
}

/* Search */
.wftpdv-search {
    margin-bottom: 15px;
}

.wftpdv-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wftpdv-search-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Table listing */
.wftpdv-listing-wrapper {
    overflow-x: auto;
    margin-bottom: 20px;
}

.wftpdv-listing {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.wftpdv-listing th,
.wftpdv-listing td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.wftpdv-listing thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.wftpdv-listing tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.wftpdv-listing .wftpdv-directory {
    background-color: rgba(13, 110, 253, 0.05);
}

.wftpdv-listing .wftpdv-name {
    width: 60%;
}

.wftpdv-listing .wftpdv-size,
.wftpdv-listing .wftpdv-date {
    width: 20%;
}

.wftpdv-empty td {
    text-align: center;
    padding: 30px;
    color: #6c757d;
    font-style: italic;
}

/* Icons */
.wftpdv-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

.wftpdv-icon-directory {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h4c.6 0 1 .4 1 1v4h13c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1z" fill="rgba(32,107,196,.5)"/></svg>');
}

.wftpdv-file-generic {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 8l6.003-6h10.995C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zm7-4v5H5v11h14V4h-9z" fill="rgba(148,148,148,.5)"/></svg>');
}

.wftpdv-file-pdf {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 8l6.003-6h10.995C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zm7-4.5v4.492a.5.5 0 0 0 .5.5H15a.5.5 0 1 1 0 1H10a1.5 1.5 0 0 1-1.5-1.5V3.5H5v16h14V3.5h-9zM8 11h8v1H8v-1zm0 2h8v1H8v-1zm0 2h5v1H8v-1z" fill="rgba(224,49,49,.5)"/></svg>');
}

.wftpdv-file-word {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 8l6.003-6h10.995C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zm7-4.5v4.492a.5.5 0 0 0 .5.5H15a.5.5 0 1 1 0 1H10a1.5 1.5 0 0 1-1.5-1.5V3.5H5v16h14V3.5h-9zM8 11h8v1H8v-1zm0 2h8v1H8v-1zm0 2h5v1H8v-1z" fill="rgba(32,84,184,.5)"/></svg>');
}

.wftpdv-file-excel {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 8l6.003-6h10.995C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zm7-4.5v4.492a.5.5 0 0 0 .5.5H15a.5.5 0 1 1 0 1H10a1.5 1.5 0 0 1-1.5-1.5V3.5H5v16h14V3.5h-9zM8 11h8v1H8v-1zm0 2h8v1H8v-1zm0 2h5v1H8v-1z" fill="rgba(32,153,84,.5)"/></svg>');
}

/* Theme: Light (default) */
.wftpdv-theme-light {
    /* Default styles are already for light theme */
}

/* Theme: Dark */
.wftpdv-theme-dark {
    color: #e9ecef;
}

.wftpdv-theme-dark .wftpdv-breadcrumb {
    background-color: #343a40;
    border-color: #495057;
}

.wftpdv-theme-dark .wftpdv-breadcrumb-item a {
    color: #8bb9fe;
}

.wftpdv-theme-dark .wftpdv-breadcrumb-separator {
    color: #adb5bd;
}

.wftpdv-theme-dark .wftpdv-search-input {
    background-color: #343a40;
    border-color: #495057;
    color: #e9ecef;
}

.wftpdv-theme-dark .wftpdv-search-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

.wftpdv-theme-dark .wftpdv-listing {
    background-color: #212529;
    border-color: #495057;
}

.wftpdv-theme-dark .wftpdv-listing th,
.wftpdv-theme-dark .wftpdv-listing td {
    border-color: #495057;
}

.wftpdv-theme-dark .wftpdv-listing thead th {
    background-color: #343a40;
}

.wftpdv-theme-dark .wftpdv-listing tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.wftpdv-theme-dark .wftpdv-listing .wftpdv-directory {
    background-color: rgba(13, 110, 253, 0.1);
}

.wftpdv-theme-dark .wftpdv-empty td {
    color: #adb5bd;
}

/* Pagination */
.wftpdv-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.wftpdv-pagination-item {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    background-color: #fff;
}

.wftpdv-pagination-item.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.wftpdv-theme-dark .wftpdv-pagination-item {
    background-color: #343a40;
    border-color: #495057;
    color: #e9ecef;
}

.wftpdv-theme-dark .wftpdv-pagination-item.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
}