body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #fff8e1;
    margin: 0;
    padding: 20px;
}

h1 { 
    color: #ff9800; 
}

/* Collapsible filter section */
.filter-section {
    border: 1px solid #ffcc80;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: #fff;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 15px;
}

.filter-section summary {
    list-style: none;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ffa726, #ff9800);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-section summary::-webkit-details-marker {
    display: none;
}

.filter-section summary::before {
    content: '\25B6';
    font-size: 0.7em;
    transition: transform 0.2s ease;
    display: inline-block;
}

.filter-section[open] summary::before {
    transform: rotate(90deg);
}

.filter-section summary:hover {
    background: linear-gradient(135deg, #ff9800, #e68a00);
}

.filter-section[open] summary {
    border-bottom: 1px solid #ffcc80;
}

.filter-section .instructions {
    margin: 0;
    padding: 8px 16px 0;
    font-size: 0.9em;
}

.filter-section .filter-bar {
    margin: 0;
    padding: 12px 16px;
}

.filter-bar {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.filter-bar label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.filter-bar select,
.filter-bar input[type="text"] { 
    padding: 5px; 
    font-size: 16px; 
}

.link-control {
    margin-left: auto;
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .filter-bar {
        gap: 10px;
    }

    .link-control {
        margin-left: 0;
        width: 100%;
    }

    .filter-section {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* Table-to-card conversion */
    #toolsTable,
    #toolsTable thead,
    #toolsTable tbody,
    #toolsTable th,
    #toolsTable td {
        display: block;
    }

    #toolsTable thead {
        display: none;
    }

    /* Each row becomes a flex card */
    #toolsTable tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        border: 1px solid #ffcc80;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
        position: relative;
        background: #fff;
    }

    #toolsTable tbody tr:hover {
        background-color: #fff;
    }

    #toolsTable tbody tr.pinned-row {
        box-shadow: inset 3px 0 0 #ff9800;
    }

    /* Remove column constraints in card mode */
    #toolsTable tbody td {
        white-space: normal;
        min-width: 0;
        max-width: none;
        border: none;
        border-bottom: none;
        padding: 4px 0;
        box-sizing: border-box;
    }

    /* Default label before each cell */
    #toolsTable tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #e57a00;
        margin-right: 6px;
    }

    th.title-col,
    td.title-col {
        min-width: 0;
        max-width: none;
    }

    .description-col,
    td:last-child {
        min-width: 0;
        max-width: none;
    }

    /* Table card wrapper becomes transparent so row-cards show their own styling */
    .table-card {
        border: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }

    /* Show more keeps its own card-like styling */
    .show-more {
        border: 1px solid #ffcc80;
        border-radius: 8px;
        background: #fff;
        margin-top: 8px;
    }

    /* ── HOME PAGE card layout ── */

    /* Type: bold, inline with title, colon separator */
    #toolsTable.page-home td.field-type {
        order: 1;
        flex: 0 0 auto;
        font-weight: bold;
    }
    #toolsTable.page-home td.field-type::before {
        display: none;
    }
    #toolsTable.page-home td.field-type::after {
        content: ':\00a0';
    }

    /* Title: same line as type, fills remaining space */
    #toolsTable.page-home td.title-col {
        order: 2;
        flex: 1 1 50%;
        font-size: 1em;
        font-weight: normal;
        padding-bottom: 4px;
        border-bottom: none;
        margin-bottom: 0;
    }
    #toolsTable.page-home td.title-col::before {
        display: none;
    }

    /* Released + Updated: side by side on line below title */
    #toolsTable.page-home td.field-date_released {
        order: 3;
        flex: 0 0 50%;
        font-size: 0.9em;
        color: #666;
    }
    #toolsTable.page-home td.field-date_updated {
        order: 4;
        flex: 0 0 50%;
        font-size: 0.9em;
        color: #666;
    }
    #toolsTable.page-home td.field-date_released::before,
    #toolsTable.page-home td.field-date_updated::before {
        content: attr(data-label) ':\00a0';
        margin-right: 0;
    }

    /* Description: full width below dates */
    #toolsTable.page-home td.description-col {
        order: 5;
        flex: 0 0 100%;
        border-top: 1px solid #eee;
        padding-top: 8px;
        margin-top: 4px;
    }
    #toolsTable.page-home td.description-col::before {
        display: none;
    }

    /* Pin: absolute top-right of card */
    #toolsTable.page-home td.pin-cell {
        order: 0;
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto;
        min-width: auto;
        max-width: none;
        padding: 0;
    }
    #toolsTable.page-home td.pin-cell::before {
        display: none;
    }

    /* ── WEBLOG card layout ── */

    /* Type: bold, inline with title, colon separator */
    #toolsTable.page-weblog td.field-type {
        order: 1;
        flex: 0 0 auto;
        font-weight: bold;
    }
    #toolsTable.page-weblog td.field-type::before {
        display: none;
    }
    #toolsTable.page-weblog td.field-type::after {
        content: ':\00a0';
    }

    /* Title: same line as type */
    #toolsTable.page-weblog td.title-col {
        order: 2;
        flex: 1 1 50%;
        font-size: 1em;
        font-weight: normal;
        padding-bottom: 4px;
        border-bottom: none;
        margin-bottom: 0;
    }
    #toolsTable.page-weblog td.title-col::before {
        display: none;
    }

    /* Description below title, full width */
    #toolsTable.page-weblog td.description-col {
        order: 3;
        flex: 0 0 100%;
        border-top: 1px solid #eee;
        padding-top: 8px;
        margin-top: 4px;
    }
    #toolsTable.page-weblog td.description-col::before {
        display: none;
    }

    /* Author: "– Author", italic, small, pushed right */
    #toolsTable.page-weblog td.field-author {
        order: 4;
        margin-left: auto;
        font-style: italic;
        font-size: 0.85em;
        color: #888;
        padding-top: 6px;
    }
    #toolsTable.page-weblog td.field-author::before {
        content: '–\00a0';
        font-weight: normal;
        color: #888;
    }

    /* Date: " on Date", italic, small */
    #toolsTable.page-weblog td.field-date_released {
        order: 5;
        font-style: italic;
        font-size: 0.85em;
        color: #888;
        padding-top: 6px;
    }
    #toolsTable.page-weblog td.field-date_released::before {
        content: '\00a0on\00a0';
        font-weight: normal;
        color: #888;
    }
}

@media (max-width: 480px) {
    /* Home dates stack vertically on very narrow screens */
    #toolsTable.page-home td.field-date_released,
    #toolsTable.page-home td.field-date_updated {
        flex: 0 0 100%;
    }
}

table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px;
    table-layout: auto;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

/* Title column styling */
th.title-col,
td.title-col {
    white-space: normal;
    min-width: 150px;
    max-width: 20%;
}

/* Description column with wrapping and responsive sizing */
.description-col,
td:last-child { 
    white-space: normal;
    min-width: 200px;
    max-width: 33%;
}

th {
    cursor: pointer;
    background-color: #ffa726;
    color: white;
}

/* Apply to local-only rows */
tr.local-tool {
    background-color: #e0f7fa;
    outline: 2px dashed #0097a7;
    position: relative;
}

/* Unified table card wrapper */
.table-card {
    border: 1px solid #ffcc80;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: #fff;
    overflow: hidden;
}

/* Overall table styling */
#toolsTable {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
  }

  /* Style for the table header (thead) */
  #toolsTable thead tr {
    background-color: #ffa726;
    color: #fff;
    font-weight: bold;
    /* A subtle inner shadow gives a 3D "pressed" look */
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  }

  /* Remove borders on header cells and add padding */
  #toolsTable thead th {
    padding: 12px 16px;
    border: none;
  }

  /* Style for table body rows */
  #toolsTable tbody tr {
    background-color: #fff;
  }

  /* Table cells styling */
  #toolsTable tbody td {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #eee;
  }

  /* Remove the bottom border on the last row */
  #toolsTable tbody tr:last-child td {
    border-bottom: none;
  }

  /* Hover effect for table rows */
  #toolsTable tbody tr:hover {
    background-color: #f9f9f9;
  }

  /* Ensure long text in header cells wraps nicely */
  #toolsTable th,
  #toolsTable td {
    word-wrap: break-word;
  }

  /* Date columns should never wrap */
  #toolsTable td.field-date_released,
  #toolsTable td.field-date_updated {
    white-space: nowrap;
  }

  #toolsTable thead th:hover {
    filter: brightness(110%);
    cursor: pointer;
}

a { 
    color: #ff9800;
    text-decoration: none;
}

/* Title column styling */
.title-col {
    padding-left: 12px; /* Avoid left padding on the cell */
}

.title-col a {
    color: #e57a00;
    text-decoration: underline;
    display: inline; /* Ensures no indentation for wrapped lines */
    transition: background-color 0.2s, box-shadow 0.2s;
    border-radius: 4px;
    padding: 0; /* Remove padding from the link itself */
}

.tool-version {
    font-size: 0.8em;
    color: #999;
    font-weight: normal;
}

.title-col a:hover {
    color: #3e1a08;
    background-color: #ffcc80;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.instructions { 
    margin-top: 10px; 
    color: #777; 
}

.footer {
    margin-top: 12px;
    color: #ff9800;
    font-size: 12px;
    text-align: center;
    padding: 6px 0;
    border-top: 1px solid #ffcc80;
}

.sort-indicator { 
    margin-left: 5px; 
}

/* Highlight with white text on dark red background */
.highlight { 
    background-color: darkred;
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
}

.show-more {
    color: #e57a00;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    padding: 10px 16px;
    border-top: 1px solid #eee;
    cursor: pointer;
}

.show-more:empty {
    display: none;
}

/* Pin-to-top feature */
.pin-header {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    cursor: default !important;
}

.pin-cell {
    cursor: pointer;
    text-align: center;
    user-select: none;
    filter: grayscale(100%);
    opacity: 0.4;
    transition: filter 0.2s, opacity 0.2s;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
}

.pin-cell:hover {
    filter: grayscale(0%);
    opacity: 0.7;
}

.pin-cell.pinned {
    filter: grayscale(0%);
    opacity: 1;
}

#toolsTable tbody tr.pinned-row {
    box-shadow: inset 3px 0 0 #ff9800;
}

#toolsTable tbody tr.pinned-row:hover {
    box-shadow: inset 3px 0 0 #ff9800;
}

/* Expandable descriptions */
.desc-content {
    max-height: 4.5em;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.desc-content.expanded {
    max-height: 2000px;
}

.description-col.truncatable {
    position: relative;
}

.desc-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}

.desc-content.expanded + .desc-fade {
    display: none;
}

#toolsTable tbody tr:hover .desc-fade {
    background: linear-gradient(transparent, #f9f9f9);
}

.desc-toggle {
    background: none;
    border: none;
    color: #e57a00;
    cursor: pointer;
    padding: 4px 0;
    font-size: 0.85em;
    font-family: inherit;
}

.desc-toggle:hover {
    text-decoration: underline;
}