/**
 * Frontend Styles — Advanced PDF Library
 *
 * Clean, modern, responsive styles for the [pdf_library_table] shortcode.
 * Uses CSS custom properties so themes can override easily.
 *
 * @package Advanced_PDF_Library
 * @version 1.0.0
 */

/* ============================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

.aplt-pdf-library-wrap {
    --aplt-primary:        #2563eb;
    --aplt-primary-hover:  #1d4ed8;
    --aplt-primary-light:  #eff6ff;
    --aplt-success:        #16a34a;
    --aplt-text:           #1e293b;
    --aplt-text-muted:     #64748b;
    --aplt-border:         #e2e8f0;
    --aplt-bg:             #ffffff;
    --aplt-bg-alt:         #f8fafc;
    --aplt-bg-hover:       #f1f5f9;
    --aplt-radius:         8px;
    --aplt-radius-sm:      4px;
    --aplt-shadow-sm:      0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .08);
    --aplt-shadow:         0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .08);
    --aplt-transition:     .18s ease;
    --aplt-font:           inherit;
    font-family:           var( --aplt-font );
    color:                 var( --aplt-text );
    max-width:             100%;
    margin:                0;
    padding:               0;
}

/* ============================================================================
   Controls Row (Search + Filter Dropdown)
   ========================================================================== */

.aplt-controls {
    display:         flex;
    flex-wrap:       wrap;
    gap:             12px;
    align-items:     center;
    margin-bottom:   20px;
}

/* --- Search Field --- */

.aplt-search-wrap {
    position:    relative;
    flex:        1 1 260px;
    min-width:   180px;
}

.aplt-search-icon {
    position:         absolute;
    left:             12px;
    top:              50%;
    transform:        translateY( -50% );
    width:            18px;
    height:           18px;
    color:            var( --aplt-text-muted );
    pointer-events:   none;
    line-height:      1;
}

.aplt-search-icon svg {
    width:   18px;
    height:  18px;
    display: block;
}

.aplt-search-input {
    width:            100%;
    padding:          10px 36px 10px 40px;
    border:           1.5px solid var( --aplt-border );
    border-radius:    var( --aplt-radius );
    font-size:        15px;
    line-height:      1.5;
    color:            var( --aplt-text );
    background:       var( --aplt-bg );
    transition:       border-color var( --aplt-transition ),
                      box-shadow var( --aplt-transition );
    box-sizing:       border-box;
    -webkit-appearance: none;
    appearance:       none;
    outline:          none;
}

.aplt-search-input:focus {
    border-color: var( --aplt-primary );
    box-shadow:   0 0 0 3px rgba( 37, 99, 235, .15 );
}

.aplt-search-input::placeholder {
    color: var( --aplt-text-muted );
}

.aplt-search-clear {
    position:         absolute;
    right:            10px;
    top:              50%;
    transform:        translateY( -50% );
    background:       none;
    border:           none;
    cursor:           pointer;
    color:            var( --aplt-text-muted );
    font-size:        18px;
    line-height:      1;
    padding:          2px 4px;
    border-radius:    50%;
    transition:       color var( --aplt-transition ),
                      background var( --aplt-transition );
}

.aplt-search-clear:hover {
    color:      var( --aplt-text );
    background: var( --aplt-bg-hover );
}

/* --- Category Filter --- */

.aplt-filter-wrap {
    flex: 0 0 auto;
}

.aplt-category-filter {
    padding:          10px 36px 10px 14px;
    border:           1.5px solid var( --aplt-border );
    border-radius:    var( --aplt-radius );
    font-size:        15px;
    line-height:      1.5;
    color:            var( --aplt-text );
    background:       var( --aplt-bg ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 10px center / 18px 18px;
    cursor:           pointer;
    transition:       border-color var( --aplt-transition ),
                      box-shadow var( --aplt-transition );
    -webkit-appearance: none;
    appearance:       none;
    outline:          none;
    min-width:        180px;
    box-sizing:       border-box;
}

.aplt-category-filter:focus {
    border-color: var( --aplt-primary );
    box-shadow:   0 0 0 3px rgba( 37, 99, 235, .15 );
}

/* ============================================================================
   Table Wrapper
   ========================================================================== */

.aplt-table-wrap {
    width:          100%;
    overflow-x:     auto;
    -webkit-overflow-scrolling: touch;
    border-radius:  var( --aplt-radius );
    border:         1px solid var( --aplt-border );
    box-shadow:     var( --aplt-shadow-sm );
}

/* ============================================================================
   Table
   ========================================================================== */

.aplt-pdf-table {
    width:           100%;
    border-collapse: collapse;
    border-spacing:  0;
    font-size:       15px;
    background:      var( --aplt-bg );
}

/* --- Header --- */

.aplt-pdf-table thead {
    background: var( --aplt-bg-alt );
}

.aplt-pdf-table thead th {
    padding:         13px 18px;
    text-align:      left;
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  .04em;
    text-transform:  uppercase;
    color:           var( --aplt-text-muted );
    border-bottom:   2px solid var( --aplt-border );
    white-space:     nowrap;
}

/* --- Body Rows --- */

.aplt-pdf-table tbody tr {
    border-bottom:  1px solid var( --aplt-border );
    transition:     background var( --aplt-transition );
}

.aplt-pdf-table tbody tr:last-child {
    border-bottom: none;
}

.aplt-pdf-table tbody tr:hover {
    background: var( --aplt-bg-hover );
}

.aplt-pdf-table tbody td {
    padding:       14px 18px;
    vertical-align: middle;
    color:          var( --aplt-text );
}

/* --- Column Widths --- */

.aplt-col-title    { width: 40%; }
.aplt-col-category { width: 22%; }
.aplt-col-date     { width: 18%; }
.aplt-col-actions  { width: 20%; text-align: center; }

.aplt-pdf-table thead .aplt-col-actions {
    text-align: center;
}

/* --- PDF Icon in Title column --- */

.aplt-pdf-icon {
    display:        inline-flex;
    align-items:    center;
    vertical-align: middle;
    margin-right:   7px;
    color:          var( --aplt-primary );
    flex-shrink:    0;
}

.aplt-pdf-icon svg {
    width:  18px;
    height: 18px;
}

/* --- Category badges --- */

.aplt-col-category {
    color: var( --aplt-text-muted );
    font-size: 14px;
}

/* --- Date styling --- */

.aplt-col-date time {
    color:     var( --aplt-text-muted );
    font-size: 14px;
}

/* ============================================================================
   Download Button
   ========================================================================== */

.aplt-download-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         7px 16px;
    background:      var( --aplt-primary );
    color:           #ffffff !important;
    text-decoration: none;
    border-radius:   var( --aplt-radius-sm );
    font-size:       13px;
    font-weight:     600;
    line-height:     1.4;
    letter-spacing:  .01em;
    transition:      background var( --aplt-transition ),
                     transform var( --aplt-transition ),
                     box-shadow var( --aplt-transition );
    white-space:     nowrap;
    box-shadow:      var( --aplt-shadow-sm );
    border:          none;
    cursor:          pointer;
}

.aplt-download-btn svg {
    width:      14px;
    height:     14px;
    flex-shrink: 0;
}

.aplt-download-btn:hover,
.aplt-download-btn:focus {
    background:  var( --aplt-primary-hover );
    transform:   translateY( -1px );
    box-shadow:  var( --aplt-shadow );
    outline:     none;
    text-decoration: none;
    color:       #ffffff !important;
}

.aplt-download-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba( 37, 99, 235, .35 );
}

.aplt-download-btn:active {
    transform:  translateY( 0 );
    box-shadow: var( --aplt-shadow-sm );
}

.aplt-no-file {
    font-size:  13px;
    color:      var( --aplt-text-muted );
    font-style: italic;
}

/* ============================================================================
   No Results Message
   ========================================================================== */

.aplt-no-results-row td {
    text-align:  center;
    padding:     40px 20px;
    color:       var( --aplt-text-muted );
    font-style:  italic;
}

.aplt-no-results-msg {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             10px;
    padding:         40px 20px;
    text-align:      center;
    color:           var( --aplt-text-muted );
    border:          1.5px dashed var( --aplt-border );
    border-radius:   var( --aplt-radius );
    margin-top:      -1px; /* Sits just below the table border */
}

.aplt-no-results-msg[hidden] {
    display: none;
}

.aplt-no-results-msg svg {
    width:   36px;
    height:  36px;
    opacity: .35;
}

.aplt-no-results-msg p {
    margin:    0;
    font-size: 15px;
}

.aplt-reset-btn {
    background:      transparent;
    border:          1.5px solid var( --aplt-border );
    border-radius:   var( --aplt-radius-sm );
    padding:         7px 18px;
    font-size:       14px;
    font-weight:     600;
    color:           var( --aplt-text );
    cursor:          pointer;
    transition:      border-color var( --aplt-transition ),
                     background var( --aplt-transition );
}

.aplt-reset-btn:hover,
.aplt-reset-btn:focus {
    border-color: var( --aplt-primary );
    background:   var( --aplt-primary-light );
    color:        var( --aplt-primary );
    outline:      none;
}

/* ============================================================================
   Search Highlight
   ========================================================================== */

.aplt-highlight {
    background:    rgba( 37, 99, 235, .15 );
    color:         var( --aplt-primary );
    padding:       0 2px;
    border-radius: 2px;
    font-style:    normal;
    font-weight:   600;
}

/* ============================================================================
   Responsive — Stacked card layout on small screens
   ========================================================================== */

@media ( max-width: 640px ) {
    .aplt-controls {
        flex-direction: column;
        align-items:    stretch;
    }

    .aplt-category-filter {
        width:     100%;
        min-width: 0;
    }

    /* Hide table headers; use data-label pseudo-headers instead */
    .aplt-pdf-table thead {
        display: none;
    }

    .aplt-pdf-table,
    .aplt-pdf-table tbody,
    .aplt-pdf-table tr,
    .aplt-pdf-table td {
        display: block;
        width:   100%;
    }

    .aplt-pdf-table tr {
        border:        1px solid var( --aplt-border );
        border-radius: var( --aplt-radius );
        margin-bottom: 10px;
        padding:       8px 0;
    }

    .aplt-pdf-table tr:last-child {
        border-bottom: 1px solid var( --aplt-border );
    }

    .aplt-pdf-table td {
        padding:      8px 16px;
        text-align:   left;
        border-bottom: 1px solid var( --aplt-border );
        position:     relative;
    }

    .aplt-pdf-table td:last-child {
        border-bottom: none;
    }

    /* Pseudo-header label */
    .aplt-pdf-table td::before {
        content:       attr( data-label );
        display:       block;
        font-size:     10px;
        font-weight:   700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color:         var( --aplt-text-muted );
        margin-bottom: 4px;
    }

    .aplt-col-actions {
        text-align: left;
    }

    .aplt-col-title,
    .aplt-col-category,
    .aplt-col-date,
    .aplt-col-actions {
        width: 100%;
    }

    .aplt-table-wrap {
        border:        none;
        box-shadow:    none;
        border-radius: 0;
        overflow-x:    visible;
    }
}

@media ( min-width: 641px ) and ( max-width: 900px ) {
    .aplt-col-title    { width: 36%; }
    .aplt-col-category { width: 22%; }
    .aplt-col-date     { width: 20%; }
    .aplt-col-actions  { width: 22%; }
}