/* =========================================================
   CMAC Document Library Full Layout + Responsive CSS
   File: /assets/css/doclib.css
   ========================================================= */

:root {
  --soft: #e9ecef;
  --border: rgba(0, 0, 0, 0.10);
  --ink: #111;
}

.doclib-section {
  padding: 50px 0 20px 0;
  background-color: var(--light-grey);
}

.doclib-section .section-content {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.doclib-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.95fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.doclib-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
}

.doclib-title {
  margin: 0 0 12px 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
}

/* Provider Grid (Left) */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.provider-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  background: #f6f7f9;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  color: var(--navy);
}

.provider-btn:hover {
  background: var(--soft);
  border-color: #111;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .10);
}

.provider-btn.active {
  background: var(--soft);
  border-color: #111;
  box-shadow: inset 0 -3px 0 var(--red), 0 12px 22px rgba(0, 0, 0, .10);
}

.provider-logo {
  width: 52px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(0, 0, 0, .08);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.provider-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  display: block;
  opacity: .92;
  filter: grayscale(15%);
  transition: filter .18s ease, opacity .18s ease;
}

.provider-btn:hover .provider-logo img,
.provider-btn.active .provider-logo img {
  filter: none;
  opacity: 1;
}

.provider-logo .initials {
  display: none;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  font-size: 0.95rem;
}

.provider-btn.no-img .provider-logo img { display: none; }
.provider-btn.no-img .provider-logo .initials { display: block; }

.provider-name {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Category Tabs (Right Top) */
.category-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.cat-btn {
  width: 100%;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 10px 12px;
  background: #f6f7f9;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: center;
}

.cat-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.cat-btn:hover:not(:disabled) {
  background: var(--soft);
  border-color: #111;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .08);
}

.cat-btn.active {
  background: var(--soft);
  border-color: #111;
  box-shadow: inset 0 -3px 0 var(--red), 0 10px 18px rgba(0, 0, 0, .08);
}

.library-status {
  margin: 10px 0 14px 0;
  font-weight: 700;
  color: #333;
  background: #f6f7f9;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}

.pdf-table-wrap {
  max-height: 55vh;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.pdf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  min-width: 520px;
}

.pdf-table th,
.pdf-table td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.pdf-table th {
  text-align: left;
  color: var(--navy);
  background: #f6f7f9;
  position: sticky;
  top: 0;
  z-index: 1;
}

.th-actions { text-align: right; }

.pdf-actions {
  width: 190px;
  text-align: right;
  white-space: nowrap;
}

.pdf-link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  font-weight: 800;
  margin-left: 8px;
  transition: transform .12s ease, opacity .12s ease;
}

.pdf-link:hover {
  transform: translateY(-1px);
  opacity: .95;
}

.pdf-link.secondary {
  background: var(--soft);
  color: #111;
  border: 1px solid rgba(0, 0, 0, .15);
}

.pdf-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.pdf-modal.is-open { display: block; }

.pdf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

.pdf-modal-card {
  position: relative;
  width: min(980px, 94vw);
  height: min(86vh, 760px);
  margin: 6vh auto 0 auto;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.pdf-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f6f7f9;
  border-bottom: 1px solid var(--border);
}

.pdf-modal-title {
  font-weight: 800;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-modal-close {
  border: 2px solid #111;
  background: var(--soft);
  color: #111;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}

.pdf-modal-body {
  height: calc(100% - 52px);
  background: #fff;
}

#pdfFrame {
  width: 100%;
  height: 100%;
  border: 0;
}

/* === RESPONSIVE ENHANCEMENTS === */
@media (max-width: 900px) {
  .doclib-grid {
    grid-template-columns: 1fr;
  }

  .pdf-modal-card {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
  }
}

@media (max-width: 768px) {
  .pdf-table thead {
    display: none;
  }

  .pdf-table tr {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 6px;
  }

  .pdf-table td {
    display: block;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
  }

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

  .pdf-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    color: #444;
  }
}

@media (max-width: 600px) {
  .pdf-modal-close {
    font-size: 1rem;
    padding: 6px 10px;
  }
}

@media print {
  .pdf-modal,
  .nav-toggle,
  .navbar,
  footer,
  header {
    display: none !important;
  }

  body {
    padding: 0;
    margin: 0;
  }
}

/* Mobile Optimization for Doc Library */
@media (max-width: 768px) {
    /* Make the Provider Logos smaller so more fit on one line */
    .provider-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 10px !important;
    }

    /* Transform the PDF table into cards so you don't have to scroll sideways */
    #pdfTableBody tr {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
    }

    .pdf-actions {
        justify-content: flex-start !important;
        margin-top: 10px;
    }
    
    /* Ensure the modal viewer fits the phone screen */
    .modal-content {
        width: 95% !important;
        height: 90vh !important;
        margin: 5% auto;
    }
}

@media (max-width: 900px) {
    /* 1. FORCE STACKING: The container holding the aside and the div */
    .doclib-container, 
    .doc-library-wrapper, 
    main.doclib-main { 
        display: flex !important;
        flex-direction: column !important; /* Forces Aside to top, Div to bottom */
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    /* 2. THE ASIDE: Make it full width and stop it from floating */
    aside.doclib-panel {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
        margin: 0 0 20px 0 !important; /* Space between sidebar and content */
        display: block !important;
    }

    /* 3. THE MAIN CONTENT DIV: Pull it back onto the screen */
    div.doclib-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        display: block !important;
        box-sizing: border-box !important;
        transform: none !important; /* Removes any accidental centering shifts */
    }

    /* 4. THE PROVIDER GRID: Ensure logos wrap inside the panel */
    .provider-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    /* 1. Reset the parent container */
    .doc-library-main-container, 
    .library-wrapper,
    main { 
        display: block !important; 
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. Aside: The Provider Grid (Top) */
    aside.doclib-panel {
        display: block !important;
        width: 90% !important;   /* 100% - (5% left + 5% right) */
        margin: 20px auto !important; /* "auto" centers it, 20px adds vertical gap */
        float: none !important;
        position: static !important;
    }

    /* 3. Div: The Document List (Bottom) */
    div.doclib-panel {
        display: block !important;
        width: 90% !important;   /* 100% - (5% left + 5% right) */
        margin: 0 auto 40px auto !important; /* Centers it and adds bottom padding */
        float: none !important;
        position: static !important;
        padding: 0 !important; /* Ensures no internal padding pushes it wide */
    }

    /* 4. Ensure the Provider Grid inside the aside doesn't break the width */
    .provider-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
        width: 100% !important;
        gap: 10px;
    }

    /* 5. Force the search/filter bar to match the width */
    .library-controls {
        flex-direction: column !important;
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    /* Kill any flex/grid display on the wrapper that might be shoving things sideways */
    .doc-library-main-container, 
    .library-wrapper, 
    main#doclib-page {
        display: block !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 5% margin left/right = 90% width centered */
    aside.doclib-panel, 
    div.doclib-panel {
        display: block !important;
        width: 90% !important; 
        margin-left: 5% !important;
        margin-right: 5% !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

    /* Ensure internal tables/grids don't poke out */
    .provider-grid, #pdfTable, .library-controls {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
}

@media (max-width: 900px) {
    /* 1. Reset the Parent Container */
    /* This is likely a flex or grid container; we force it to be a simple block */
    .library-main-wrapper, 
    .doc-library-container,
    main#doclib-page {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* 2. Aside (Service Providers) - Center with 5% margin */
    aside.doclib-panel {
        display: block !important;
        width: 90% !important; /* 100% - 5% left - 5% right */
        margin: 20px 5% !important; /* Top/Bottom 20px, Left/Right 5% */
        float: none !important;
        box-sizing: border-box !important;
    }

    /* 3. Div (Document Display) - Center with 5% margin */
    div.doclib-panel {
        display: block !important;
        width: 90% !important;
        margin: 0 5% 40px 5% !important; /* Top 0, Left/Right 5%, Bottom 40px */
        float: none !important;
        box-sizing: border-box !important;
    }

    /* 4. Internal Provider Grid (Service Providers List) */
    /* Force 2 columns on mobile instead of 1 so it doesn't get too long */
    .provider-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* 5. Document List Table Fix */
    /* If the table inside the div is still pushing wide, force buttons to stack */
    .pdf-item-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }

    .pdf-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}

@media (max-width: 900px) {
    /* 1. Force the main wrapper to stop being a flexbox/grid */
    .doc-library-main-container, 
    .library-wrapper,
    main#doclib-page {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* 2. Standardize Panels: 5% Left, 5% Right */
    aside.doclib-panel, 
    div.doclib-panel {
        display: block !important;
        width: 90% !important; /* Forces the 5% + 5% math */
        margin-left: 5% !important;
        margin-right: 5% !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        float: none !important;
        padding: 15px !important; /* Internal breathing room */
        box-sizing: border-box !important;
        position: relative !important;
        left: 0 !important;
    }

    /* 3. Provider Grid: Ensure 2 columns inside the 90% width */
    .provider-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* 4. The Category Buttons (Brochures / Info) */
    /* In your screenshot, these are too wide. Force them to stack or shrink. */
    .category-tabs, .library-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .category-tabs button, .tab-btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 5. Document List Table */
    /* Ensure the "View/Download" buttons don't push the table wide */
    #pdfTable td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 5px 0 !important;
    }
}

/* =========================================================
   REFINED DOCLIB RESPONSIVE STACK (v2.0)
   ========================================================= */

/* 1. START STACKING EARLY (1090px) */
@media (max-width: 1090px) {
    .doc-library-main-container, 
    .library-wrapper {
        display: block !important;
    }

    aside.doclib-panel, 
    div.doclib-panel {
        display: block !important;
        width: 90% !important; /* 5% margin left/right */
        margin: 20px 5% !important;
        float: none !important;
    }

    /* PROVIDERS: 3 Columns */
    .provider-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px;
    }

    /* Ensure provider buttons allow text to wrap */
    .provider-btn {
        height: auto !important;
        white-space: normal !important;
        padding: 10px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* 2. BUTTON REALIGNMENT (770px) */
@media (max-width: 770px) {
    /* Target the row containing the filename and buttons */
    .pdf-item-row {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        align-items: flex-start !important; /* Align everything to the left */
        padding: 15px !important;
    }

    /* Move buttons directly beneath title */
    .pdf-actions {
        display: flex !important;
        justify-content: flex-start !important; 
        gap: 15px;
        margin-top: 10px;
        width: 100%;
    }

    /* Ensure buttons don't stay far right */
    .pdf-actions button, 
    .pdf-actions a {
        margin: 0 !important;
        flex: 0 1 auto; /* Don't force them to stretch, just sit left */
    }
}

/* 3. PROVIDER SHIFT (650px) */
@media (max-width: 650px) {
    /* Switch providers from 3 columns to 2 columns */
    .provider-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 4. FINAL SAFETY (500px) */
@media (max-width: 500px) {
    /* If screen is tiny, buttons stack on top of each other to stay in the box */
    .pdf-actions {
        flex-direction: column !important;
        gap: 8px;
    }
    
    .pdf-actions a, .pdf-actions button {
        width: 100% !important;
        text-align: center;
    }
}

@media (max-width: 1090px) {
    /* 1. Reset the section and grid wrapper */
    #docLibrarySection, 
    .doclib-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important; /* Absolute wall at screen edge */
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* 2. Target the specific panels to force the 5% margin balance */
    aside.doclib-panel, 
    div.doclib-panel {
        display: block !important;
        width: 90% !important;   /* The remaining 10% becomes your margins */
        margin-left: 5% !important; 
        margin-right: 5% !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        float: none !important;
        box-sizing: border-box !important; /* Crucial: includes padding in width */
    }

    /* 3. The Grid Reset */
    /* Ensure the internal grid doesn't have a fixed width or negative margin */
    .doclib-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers the panels inside the grid */
    }
}

@media (max-width: 770px) {
    /* Target the container for the buttons */
    .pdf-actions {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        align-items: flex-start !important; /* Align everything to the LEFT */
        width: 100% !important;
        margin-top: 10px;
    }

    /* Set buttons to 50% width */
    .pdf-actions a, 
    .pdf-actions button {
        width: 50% !important;   /* Half the container width */
        min-width: 150px !important; /* Ensures buttons stay clickable and text doesn't cramp */
        text-align: center !important;
        margin-bottom: 8px !important; /* Vertical gap between View and Download */
        margin-left: 0 !important;     /* Reset any centering */
        margin-right: auto !important; /* Anchor to the left */
        box-sizing: border-box !important;
    }
}

@media (max-width: 770px) {
    /* 1. Target the filename/description text */
    .pdf-item-title, 
    .doc-description,
    .pdf-item-row span {
        display: block !important;
        width: 100% !important;
        white-space: normal !important; /* Forces the text to wrap to the next line */
        word-wrap: break-word !important; /* Ensures long words don't poke out */
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important; /* Space between text and the buttons below */
    }

    /* 2. Ensure the parent row doesn't restrict height */
    .pdf-item-row {
        height: auto !important;
        min-height: 60px !important;
        display: block !important; /* Breaks the flex-line if any remained */
    }
}

@media (max-width: 770px) {
    /* 1. Force the entire row to be a vertical stack */
    .pdf-item-row {
        display: block !important; /* Kills flexbox entirely to force stacking */
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. Force the title to occupy the full width and wrap */
    .pdf-item-title, 
    .doc-description {
        display: block !important;
        width: 100% !important;
        white-space: normal !important; 
        word-wrap: break-word !important;
        margin-bottom: 15px !important; /* Space before buttons start */
    }

    /* 3. Stack buttons vertically, aligned left, 50% width */
    .pdf-actions {
        display: flex !important;
        flex-direction: column !important; /* One button per line */
        align-items: flex-start !important; /* Align to the LEFT */
        width: 100% !important;
        gap: 8px !important;
    }

    .pdf-actions a, 
    .pdf-actions button {
        display: block !important;
        width: 50% !important; /* Half width as requested */
        min-width: 160px !important; /* Keeps them from getting too skinny */
        text-align: center !important;
        margin: 0 !important;
        padding: 10px !important;
    }
}

@media (max-width: 770px) {
    /* 1. Force Tables, Rows, and Cells to act like Blocks */
    .pdf-item-row, 
    tr.pdf-item-row, 
    td.pdf-item-content,
    .doc-description-container {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

    /* 2. Kill the "No-Wrap" on the text */
    .pdf-item-title, 
    .doc-description,
    td {
        display: block !important;
        width: 100% !important;
        white-space: normal !important; /* Force wrapping */
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    /* 3. Force Buttons to Stack on the Left at 50% */
    .pdf-actions {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        align-items: flex-start !important; /* Align left */
        width: 100% !important;
        gap: 8px !important;
        padding-top: 10px !important;
    }

    .pdf-actions a, 
    .pdf-actions button {
        display: block !important;
        width: 50% !important; /* Half width */
        min-width: 160px !important;
        text-align: center !important;
        margin: 0 !important;
    }
}

@media (max-width: 770px) {
    /* 1. Force the Table, Row, and Cell to act like standard boxes */
    table, tbody, tr, td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Target the specific TD containing the text */
    td {
        white-space: normal !important; /* The most important line */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        height: auto !important;
        padding: 10px 0 !important;
        line-height: 1.5 !important;
        border: none !important; /* Optional: cleans up table borders on mobile */
    }

    /* 3. The Buttons inside the TD */
    .pdf-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }

    .pdf-actions a, 
    .pdf-actions button {
        width: 50% !important;
        min-width: 160px !important;
        text-align: center !important;
    }
}

@media (max-width: 950px) {
    /* 1. Kill the Table identity completely */
    table#docLibraryTable, 
    .doclib-grid table, 
    table {
        display: block !important;
        width: 100% !important;
        table-layout: auto !important; /* Overrides 'fixed' which causes the overflow */
        border-collapse: collapse !important;
    }

    /* 2. Force every structural element to be a vertical block */
    thead, tbody, tfoot, tr, td {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* 3. The wrapping "Silver Bullet" for the TD */
    td {
        display: block !important;
    width: 100% !important;        /* Changed from 100% to 92% */
    max-width: 100% !important;    /* Forces a hard stop */
    margin: 0 auto !important;    /* Centers the block if it's too skinny */
    white-space: normal !important; 
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important; 
    padding: 10px 4% !important;  /* Balanced padding on left/right */
    }

    /* 4. Hide table headers (optional, usually looks better on mobile) */
    thead {
        display: none !important;
    }

    /* 5. Buttons: 50% width, Stacked, Left-Aligned */
    .pdf-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 15px !important;
    }

    .pdf-actions a, 
    .pdf-actions button {
        width: 50% !important;
        min-width: 140px !important;
        display: block !important;
    }
}

.pdf-item-title, 
    .doc-description {
        display: block !important;
        width: 85% !important; /* Forces the text to stop and wrap early */
        max-width: 85% !important; 
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important; /* Gap before buttons */
    }

    /* 3. Ensure the buttons don't float up into the text space */
    .pdf-actions {
        clear: both !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
}

@media (max-width: 950px) { /* Triggering it earlier than 770px */
    td {
        display: block !important;
        width: 70% !important;
        padding-right: 40% !important; /* This forces the text to wrap 'too soon' so it never overflows */
        box-sizing: border-box !important;
    }

    .pdf-item-title {
        white-space: normal !important;
        word-break: break-word !important;
    }

    .pdf-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 40% !important; /* Your half-width preference */
        align-items: flex-start !important;
    }
}

/* 1. DEFAULT (DESKTOP) VIEW */
/* Ensures everything stays in one neat row */
.pdf-item-row td {
    display: table-cell !important; /* Restore table behavior */
    vertical-align: middle;
}

.pdf-actions {
    display: flex !important;
    flex-direction: row !important; /* Force horizontal */
    align-items: center;
    gap: 15px;
    white-space: nowrap; /* Prevents buttons from wrapping on desktop */
}

/* 2. MOBILE VIEW (Break point) */
@media (max-width: 770px) {
    /* Break the table so text can wrap */
    table, tbody, tr, td {
        display: block !important;
        width: 100% !important;
    }

    td {
        padding: 15px !important;
    }

    /* Force the description to wrap */
    .pdf-item-title, .doc-description {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        margin-bottom: 15px !important;
    }

    /* Stack buttons vertically ONLY on mobile */
    .pdf-actions {
        display: flex !important;
        flex-direction: column !important; /* Stacked */
        align-items: flex-start !important; /* Align Left */
        width: 50% !important; /* Half width as requested */
        gap: 8px !important;
    }

    .pdf-actions a, 
    .pdf-actions button {
        width: 100% !important; /* Takes up the full 50% of the parent */
        text-align: center;
    }
}

/* 1. DESKTOP: THE ROW */
.pdf-item-row {
    display: table-row !important;
}

.pdf-item-row td {
    display: table-cell !important;
    vertical-align: middle !important;
    white-space: nowrap !important; /* Keeps desktop on one line */
}

.pdf-actions {
    display: inline-flex !important; /* Keeps buttons side-by-side */
    flex-direction: row !important;
    gap: 10px !important;
}

/* 2. MOBILE: THE STACK */
@media screen and (max-width: 770px) {
    .pdf-item-row, 
    .pdf-item-row td {
        display: block !important; /* Break the table identity */
        width: 100% !important;
        white-space: normal !important; /* Force text wrap */
    }

    .pdf-item-row td {
        padding: 15px 5% !important;
    }

    .pdf-actions {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        align-items: flex-start !important; /* Align left */
        width: 50% !important; /* Half width */
        margin-top: 10px !important;
    }

    .pdf-actions a, 
    .pdf-actions button {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
}

/* =========================================================
   FINAL ARCHITECTURAL BRANDING & MOBILE FIX
   ========================================================= */

/* 1. Force AGS Casing: Beat the User Agent 'none' */
.provider-btn[data-provider="ags"] .provider-name {
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/* 2. Provider Button: Handles Wrapping and Pill-Shape */
.provider-btn {
    white-space: normal !important;
    height: auto !important;
    min-height: 54px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 20px !important;
}

.provider-name {
    line-height: 1.1 !important;
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
}

/* 3. Mobile Specific: Stack logo over text on small screens */
@media (max-width: 768px) {
    .provider-btn {
        flex-direction: column !important;
        text-align: center !important;
        min-height: 110px !important;
        justify-content: center !important;
    }
    .provider-name {
        text-align: center !important;
    }
}