/* PCRU Document Manager v2.3.0 Styles */

.pcru-doc-wrapper {

    font-family: var(--wp--preset--font-family--kanit, 'Kanit', sans-serif);

    margin: 20px 0;

    width: 100%;

}

.pcru-doc-wrapper a {

    text-decoration: none !important;

}

.pcru-doc-controls {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}

.pcru-doc-controls-left {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;

    flex: 1;

}

.pcru-doc-search-box {

    position: relative;

    min-width: 260px;

    flex: 1;

    max-width: 400px;

}

.pcru-doc-search-box svg {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    width: 18px;

    height: 18px;

    color: #94a3b8;

}

.pcru-doc-search-input {

    width: 100%;

    padding: 10px 14px 10px 42px;

    border: 1.5px solid #cbd5e1;

    border-radius: 10px;

    font-size: 14px;

    font-family: inherit;

    background: #ffffff;

    transition: all 0.2s ease;

    box-sizing: border-box;

}

.pcru-doc-search-input:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);

}

.pcru-doc-filter-pills {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.pcru-filter-pill {

    background: #f1f5f9;

    color: #475569;

    border: 1px solid #e2e8f0;

    padding: 6px 14px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 500;

    font-family: inherit;

    cursor: pointer;

    transition: all 0.2s ease;

    text-decoration: none !important;

}

.pcru-filter-pill:hover {

    background: #e2e8f0;

    color: #1e293b;

}

.pcru-filter-pill.active {

    background: #2563eb;

    color: #ffffff;

    border-color: #2563eb;

    font-weight: 600;

}



/* View Switcher */

.pcru-view-switcher {

    display: flex;

    background: #f1f5f9;

    padding: 4px;

    border-radius: 10px;

    border: 1px solid #e2e8f0;

    gap: 4px;

}

.pcru-view-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    border: none;

    background: transparent;

    padding: 6px 12px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 600;

    color: #64748b;

    cursor: pointer;

    transition: all 0.2s ease;

    text-decoration: none !important;

}

.pcru-view-btn svg {

    width: 16px;

    height: 16px;

}

.pcru-view-btn.active {

    background: #ffffff;

    color: #1e3a8a;

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);

}



/* 1. TABLE VIEW (DATATABLE) */

.view-mode-table .pcru-doc-table-container { display: block; }

.view-mode-table .pcru-doc-grid-container { display: none; }



.view-mode-grid .pcru-doc-table-container { display: none; }

.view-mode-grid .pcru-doc-grid-container { display: grid; }



.pcru-doc-table-container {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    overflow-x: auto;

    box-shadow: 0 2px 6px rgba(0,0,0,0.03);

}

.pcru-datatable {

    width: 100%;

    border-collapse: collapse;

    font-size: 14px;

}

.pcru-datatable th {

    background: #f8fafc;

    color: #334155;

    font-weight: 700;

    padding: 12px 14px;

    border-bottom: 2px solid #e2e8f0;

    font-size: 13.5px;

}

.pcru-datatable td {

    padding: 12px 14px;

    border-bottom: 1px solid #f1f5f9;

    vertical-align: middle;

}

.pcru-datatable tbody tr {

    transition: background 0.15s ease;

}

.pcru-datatable tbody tr:hover {

    background: #f8fafc;

}

.pcru-table-doc-cell {

    display: flex;

    align-items: center;

    gap: 10px;

}

.pcru-table-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 800;

    color: #ffffff !important;

    letter-spacing: 0.5px;

    flex-shrink: 0;

    text-decoration: none !important;

}

.pcru-table-title {

    font-weight: 600;

    color: #1e293b !important;

    text-decoration: none !important;

    transition: color 0.2s ease;

    line-height: 1.4;

}

.pcru-table-title:hover {

    color: #2563eb !important;

    text-decoration: none !important;

}

.pcru-table-cat {

    display: inline-block;

    background: #f1f5f9;

    color: #475569;

    font-size: 12px;

    padding: 3px 8px;

    border-radius: 6px;

}

.pcru-table-downloads {

    font-weight: 700;

    color: #2563eb;

    background: #eff6ff;

    padding: 3px 8px;

    border-radius: 6px;

    font-size: 12.5px;

}

.pcru-btn-table-download {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: #2563eb;

    color: #ffffff !important;

    padding: 6px 14px;

    border-radius: 7px;

    font-size: 12.5px;

    font-weight: 600;

    text-decoration: none !important;

    transition: all 0.2s ease;

}

.pcru-btn-table-download svg {

    width: 14px;

    height: 14px;

}

.pcru-btn-table-download:hover {

    background: #1d4ed8;

    color: #ffffff !important;

    text-decoration: none !important;

    box-shadow: 0 4px 10px rgba(37,99,235,0.25);

}



/* 2. GRID CARDS VIEW */

.pcru-doc-grid-container {

    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));

    gap: 16px;

}

.pcru-doc-card-item {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 16px 18px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: all 0.2s ease;

    box-shadow: 0 2px 4px rgba(0,0,0,0.02);

}

.pcru-doc-card-item:hover {

    border-color: #cbd5e1;

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.06);

}

.pcru-doc-card-header {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 10px;

}

.pcru-card-cat-badge {

    background: #f1f5f9;

    color: #64748b;

    font-size: 11px;

    font-weight: 600;

    padding: 3px 8px;

    border-radius: 6px;

    margin-left: auto;

}

.pcru-doc-badge {

    width: 38px;

    height: 38px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 11px;

    letter-spacing: 0.5px;

    color: #ffffff !important;

    flex-shrink: 0;

    text-decoration: none !important;

}

.badge-pdf { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.badge-word { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }

.badge-excel { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }

.badge-ppt { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }

.badge-zip { background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%); }

.badge-other { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }



.pcru-doc-card-body {

    flex: 1;

    margin-bottom: 12px;

}

.pcru-doc-title {

    margin: 0 0 6px 0;

    font-size: 14.5px;

    font-weight: 600;

    line-height: 1.4;

}

.pcru-doc-link {

    color: #1e293b !important;

    text-decoration: none !important;

    transition: color 0.2s;

}

.pcru-doc-link:hover {

    color: #2563eb !important;

    text-decoration: none !important;

}

.pcru-doc-meta {

    font-size: 12px;

    color: #64748b;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

}

.pcru-meta-sep {

    color: #cbd5e1;

}

.pcru-doc-card-footer {

    border-top: 1px solid #f1f5f9;

    padding-top: 12px;

}

.pcru-btn-download {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    background: #eff6ff;

    color: #2563eb !important;

    border: 1px solid #bfdbfe;

    padding: 8px 16px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none !important;

    transition: all 0.2s ease;

    width: 100%;

    box-sizing: border-box;

}

.pcru-btn-download svg {

    width: 15px;

    height: 15px;

}

.pcru-btn-download:hover {

    background: #2563eb;

    color: #ffffff !important;

    border-color: #2563eb;

    text-decoration: none !important;

}



/* Pagination */

.pcru-doc-pagination {

    margin-top: 24px;

    display: flex;

    justify-content: center;

}

.pcru-doc-pagination ul.page-numbers {

    display: flex;

    list-style: none;

    padding: 0;

    margin: 0;

    gap: 6px;

    align-items: center;

}

.pcru-doc-pagination li {

    margin: 0;

    padding: 0;

}

.pcru-doc-pagination a.page-numbers,

.pcru-doc-pagination span.page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 38px;

    height: 38px;

    padding: 0 12px;

    border-radius: 8px;

    border: 1px solid #e2e8f0;

    background: #ffffff;

    color: #475569;

    font-size: 13.5px;

    font-weight: 600;

    text-decoration: none !important;

    transition: all 0.2s ease;

}

.pcru-doc-pagination a.page-numbers:hover {

    background: #eff6ff;

    color: #2563eb;

    border-color: #bfdbfe;

    text-decoration: none !important;

}

.pcru-doc-pagination span.page-numbers.current {

    background: #2563eb;

    color: #ffffff;

    border-color: #2563eb;

    box-shadow: 0 3px 8px rgba(37,99,235,0.25);

    text-decoration: none !important;

}

.pcru-doc-empty {

    text-align: center;

    padding: 30px;

    color: #94a3b8;

    background: #f8fafc;

    border-radius: 12px;

}





/* ==========================================================================

   MOBILE RESPONSIVE ADAPTATION FOR DOCUMENT TABLE & CONTROLS (<= 768px)

   ========================================================================== */

@media (max-width: 768px) {

  .pcru-doc-controls {

    flex-direction: column;

    align-items: stretch;

    gap: 12px;

  }

  .pcru-doc-controls-left {

    flex-direction: column;

    align-items: stretch;

    width: 100%;

    gap: 10px;

  }

  .pcru-doc-search-box {

    max-width: 100% !important;

    min-width: 100% !important;

    width: 100% !important;

  }

  .pcru-doc-filter-pills {

    display: flex;

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 6px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

    gap: 6px;

  }

  .pcru-filter-pill {

    white-space: nowrap;

    flex-shrink: 0;

    padding: 5px 12px;

    font-size: 12.5px;

  }

  .pcru-view-switcher {

    display: none !important;

  }



  /* Transform Table into Responsive Mobile Cards */

  .pcru-doc-table-container {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    overflow-x: visible !important;

    padding: 0 !important;

  }

  .pcru-datatable {

    display: block !important;

    width: 100% !important;

    border: none !important;

  }

  .pcru-datatable thead {

    display: none !important;

  }

  .pcru-datatable tbody {

    display: flex !important;

    flex-direction: column !important;

    gap: 12px !important;

    width: 100% !important;

  }

  .pcru-datatable tbody tr.pcru-doc-row {

    display: block !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 14px !important;

    padding: 15px 16px !important;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;

    box-sizing: border-box !important;

    width: 100% !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease !important;

  }

  .pcru-datatable tbody tr.pcru-doc-row:hover {

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;

  }

  .pcru-datatable tbody tr.pcru-doc-row > td {

    display: block !important;

    padding: 0 !important;

    border: none !important;

    text-align: left !important;

  }



  /* Top Section: Badge & Title */

  .pcru-datatable tbody tr.pcru-doc-row > td:nth-child(1) {

    margin-bottom: 8px;

  }

  .pcru-table-doc-cell {

    display: flex !important;

    align-items: flex-start !important;

    gap: 10px !important;

  }

  .pcru-table-badge {

    width: 38px !important;

    height: 38px !important;

    border-radius: 8px !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    flex-shrink: 0 !important;

  }

  .pcru-table-title {

    font-size: 14.5px !important;

    font-weight: 700 !important;

    line-height: 1.45 !important;

    color: #1e293b !important;

  }



  /* Meta tags row (Category, Date, Size, Downloads) */

  .pcru-datatable tbody tr.pcru-doc-row > td:nth-child(2),

  .pcru-datatable tbody tr.pcru-doc-row > td:nth-child(3),

  .pcru-datatable tbody tr.pcru-doc-row > td:nth-child(4),

  .pcru-datatable tbody tr.pcru-doc-row > td:nth-child(5) {

    display: inline-flex !important;

    align-items: center !important;

    margin-right: 8px !important;

    margin-bottom: 6px !important;

    font-size: 12px !important;

    color: #64748b !important;

  }

  .pcru-table-cat {

    font-size: 11.5px !important;

    font-weight: 600 !important;

    background: #f1f5f9 !important;

    color: #475569 !important;

    padding: 3px 8px !important;

    border-radius: 6px !important;

  }

  .pcru-datatable tbody tr.pcru-doc-row > td:nth-child(3)::before {

    content: "📅 ";

    margin-right: 2px;

  }

  .pcru-datatable tbody tr.pcru-doc-row > td:nth-child(4)::before {

    content: "💾 ";

    margin-right: 2px;

  }

  .pcru-table-downloads {

    font-size: 11.5px !important;

    padding: 3px 8px !important;

  }



  /* Action Download Button */

  .pcru-datatable tbody tr.pcru-doc-row > td:nth-child(6) {

    margin-top: 6px !important;

    padding-top: 10px !important;

    border-top: 1px solid #f1f5f9 !important;

  }

  .pcru-btn-table-download {

    width: 100% !important;

    min-height: 40px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 8px !important;

    font-size: 13.5px !important;

    font-weight: 700 !important;

    box-sizing: border-box !important;

  }



  /* Grid card adaptation */

  .pcru-doc-grid-container {

    grid-template-columns: 1fr !important;

    gap: 12px !important;

  }

}


/* ==========================================================================
   AUTO-SWITCH TO CARD VIEW ON MOBILE (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Force Hide Table and Force Show Beautiful Card Grid on Mobile */
  .pcru-doc-wrapper .pcru-doc-table-container,
  .view-mode-table .pcru-doc-table-container {
    display: none !important;
  }

  .pcru-doc-wrapper .pcru-doc-grid-container,
  .view-mode-table .pcru-doc-grid-container,
  .view-mode-grid .pcru-doc-grid-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .pcru-view-switcher {
    display: none !important;
  }

  /* Refined Mobile Card Styling */
  .pcru-doc-card-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .pcru-doc-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 2px !important;
  }

  .pcru-doc-badge {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
  }

  .pcru-card-cat-badge {
    margin-left: auto !important;
    background: rgba(81, 24, 155, 0.08) !important;
    color: #51189b !important;
    border: 1px solid rgba(81, 24, 155, 0.18) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
  }

  .pcru-doc-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    margin: 4px 0 8px 0 !important;
  }

  .pcru-doc-link {
    color: #1e293b !important;
  }

  .pcru-doc-meta {
    font-size: 12px !important;
    color: #64748b !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .pcru-doc-card-footer {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
  }

  .pcru-btn-download {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #51189b 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(81, 24, 155, 0.25) !important;
    box-sizing: border-box !important;
  }

  .pcru-btn-download svg {
    width: 16px !important;
    height: 16px !important;
  }
}