/* ========================================
   TALKATIVE TURTLES - CLEAN FORUM THEME
   ======================================== */

/* ========================================
   CSS RESET & BASE
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background: #f5f5f5;
}

a {
    color: #4f8a8b;
    text-decoration: none;
}

a:hover {
    color: #3d6d6e;
    text-decoration: underline;
}

/* ========================================
   PAGE LAYOUT
   ======================================== */
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/* ========================================
   MAIN TABLE CONTAINER
   ======================================== */
.tborder {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ========================================
   TABLE HEADER (Category title bar)
   ======================================== */
.thead {
    background: linear-gradient(135deg, #4f8a8b, #5a9a9b) !important;
    padding: 14px 16px !important;
    border: none !important;
}

.thead,
.thead td,
.thead th {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Category name - make it bigger and bolder */
.thead strong,
.thead strong a,
.thead div strong,
.thead div strong a {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.thead strong a:hover,
.thead div strong a:hover {
    color: #d0e8e8 !important;
    text-decoration: none !important;
}

/* Subtitle/description under category name */
.thead .smalltext,
.thead div.smalltext {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
}

.thead a:hover {
    color: #d0e8e8 !important;
    text-decoration: none !important;
}

/* ========================================
   COLLAPSE/EXPAND BUTTONS
   ======================================== */

/* Just make the default image bigger and cleaner */
.expcolimage {
    display: inline-block !important;
}

.expcolimage img.expander,
img.expander {
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    opacity: 0.9 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.expcolimage img.expander:hover,
img.expander:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* ========================================
   COLUMN HEADERS (Thread/Author, Replies, etc.)
   ======================================== */
.tcat,
.tcat td,
tr.tcat td,
.tcat th,
tr.tcat th,
td.tcat,
th.tcat,
tr td.tcat,
tbody tr td.tcat {
    background: #5a9a9b !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-bottom: none !important;
    white-space: nowrap;
}

/* Target the specific Forum cell with colspan */
td.tcat[colspan],
td.tcat[colspan="2"] {
    background: #5a9a9b !important;
}

/* Force ALL tcat cells to have same background */
table.tborder td.tcat,
table.tborder .tcat,
table.tborder tr td.tcat,
.tborder td.tcat {
    background: #5a9a9b !important;
    border: none !important;
}

/* FORCE all text inside tcat to be white */
.tcat,
.tcat *,
td.tcat,
td.tcat *,
.tcat a,
.tcat td a,
.tcat th a,
.tcat span,
.tcat td span,
.tcat th span,
.tcat strong,
.tcat td strong,
.tcat th strong,
.tcat div,
.tcat td div,
.tcat td *,
.tcat th *,
td.tcat *,
td.tcat span,
td.tcat strong,
td.tcat span strong,
td.tcat a,
td.tcat div,
td.tcat span a,
.tcat span a {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: transparent !important;
    text-transform: uppercase !important;
}

.tcat a:hover,
.tcat td a:hover,
td.tcat a:hover,
.tcat span a:hover,
td.tcat span a:hover {
    color: #c0dede !important;
    text-decoration: none !important;
}

/* ========================================
   SECTION SEPARATORS (Important Threads, etc.)
   Only target tcat cells that span ALL columns (5+ columns)
   ======================================== */
td.tcat[colspan="5"],
td.tcat[colspan="6"],
td.tcat[colspan="7"],
td.tcat[colspan="8"],
td.tcat[colspan="9"],
td.tcat[colspan="10"],
.tcat[colspan="5"],
.tcat[colspan="6"],
.tcat[colspan="7"],
.tcat[colspan="8"],
.tcat[colspan="9"],
.tcat[colspan="10"] {
    background: #e8f4f4 !important;
    color: #4f8a8b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-bottom: 1px solid #d0e0e0 !important;
    border-left: 3px solid #4f8a8b !important;
}

td.tcat[colspan="5"] *,
td.tcat[colspan="6"] *,
td.tcat[colspan="7"] *,
td.tcat[colspan="8"] *,
td.tcat[colspan="9"] *,
td.tcat[colspan="10"] * {
    color: #4f8a8b !important;
    background: transparent !important;
    text-transform: none !important;
}

/* Ensure colspan 2 and 3 (used in header row) stay teal with white text */
td.tcat[colspan="2"],
td.tcat[colspan="3"],
.tcat[colspan="2"],
.tcat[colspan="3"] {
    background: #5a9a9b !important;
    color: #fff !important;
    border-left: none !important;
}

td.tcat[colspan="2"] *,
td.tcat[colspan="3"] *,
td.tcat[colspan="2"] .smalltext,
td.tcat[colspan="3"] .smalltext,
td.tcat[colspan="2"] span,
td.tcat[colspan="3"] span {
    color: #fff !important;
    background: transparent !important;
}

/* ========================================
   THREAD/FORUM ROWS
   ======================================== */

/* Base row styling - UNIFIED */
.trow1,
.trow2,
tr.inline_row {
    background: #fff !important;
}

.trow2 {
    background: #fafafa !important;
}

/* All cells in rows */
.trow1 td,
.trow2 td,
tr.inline_row td {
    padding: 14px 12px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
    font-size: 13px;
    color: #444;
}

/* Row hover */
tr:hover .trow1,
tr:hover .trow2,
.trow1:hover,
.trow2:hover,
tr.inline_row:hover {
    background: #f5f9f9 !important;
}

tr:hover .trow1 td,
tr:hover .trow2 td,
.trow1:hover td,
.trow2:hover td,
tr.inline_row:hover td {
    background: transparent !important;
}

/* ========================================
   THREAD LIST - SPECIFIC COLUMNS
   ======================================== */

/* Column 1: Thread status icon */
.trow1 td:first-child,
.trow2 td:first-child {
    width: 30px !important;
    padding: 14px 6px 14px 12px !important;
    text-align: center !important;
}

.trow1 td:first-child img,
.trow2 td:first-child img {
    max-width: 16px;
    height: auto;
    opacity: 0.5;
}

/* Column 2: Thread title & author */
.trow1 td:nth-child(2),
.trow2 td:nth-child(2) {
    padding: 14px 16px !important;
}

/* Thread titles */
.subject_new a,
.subject_old a {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    display: inline;
    line-height: 1.4;
}

.subject_new a {
    color: #1a1a1a;
}

.subject_old a {
    color: #444;
}

.subject_new a:hover,
.subject_old a:hover {
    color: #4f8a8b;
    text-decoration: none;
}

/* Thread metadata (author, date) */
.trow1 td:nth-child(2) .smalltext,
.trow2 td:nth-child(2) .smalltext {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 3px;
    display: block;
}

.trow1 td:nth-child(2) .smalltext a,
.trow2 td:nth-child(2) .smalltext a {
    color: #4f8a8b !important;
    font-weight: 500;
}

/* Columns 3, 4, 5: Replies, Views, Rating - CENTERED */
.trow1 td:nth-child(3),
.trow2 td:nth-child(3),
.trow1 td:nth-child(4),
.trow2 td:nth-child(4),
.trow1 td:nth-child(5),
.trow2 td:nth-child(5) {
    width: 80px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #555 !important;
    padding: 14px 8px !important;
}

/* Column 6: Last Post */
.trow1 td:nth-child(6),
.trow2 td:nth-child(6) {
    width: 160px !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.5 !important;
    text-align: right !important;
}

.trow1 td:nth-child(6) a,
.trow2 td:nth-child(6) a {
    color: #4f8a8b !important;
    font-size: 12px !important;
}

.trow1 td:nth-child(6) .smalltext,
.trow2 td:nth-child(6) .smalltext {
    font-size: 11px !important;
    color: #999 !important;
}

/* Column 7: Checkbox (inline moderation) */
.trow1 td:nth-child(7),
.trow2 td:nth-child(7) {
    width: 35px !important;
    text-align: center !important;
    padding: 14px 10px !important;
}

/* ========================================
   FORUM INDEX - SPECIFIC STYLING
   ======================================== */

/* Forum names */
.trow1 strong a,
.trow2 strong a {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.trow1 strong a:hover,
.trow2 strong a:hover {
    color: #4f8a8b;
}

/* Forum descriptions */
.trow1 .smalltext,
.trow2 .smalltext {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

/* Last post in forum index */
.lastpost {
    font-size: 12px;
    line-height: 1.6;
    color: #666;
}

.lastpost a {
    color: #4f8a8b;
    font-weight: 500;
}

.lastpost a:first-child {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.lastpost a:first-child:hover {
    color: #4f8a8b;
}

/* ========================================
   WELCOME BANNER
   ======================================== */
.community-welcome {
    background: linear-gradient(135deg, #4f8a8b, #6fa8a8);
    color: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(79, 138, 139, 0.2);
}

.community-welcome strong {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.welcome-text span {
    font-size: 13px;
    opacity: 0.9;
}

.welcome-button {
    background: #fff;
    color: #4f8a8b;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
}

.welcome-button:hover {
    background: #f0f7f7;
    text-decoration: none;
}

/* ========================================
   BUTTONS
   ======================================== */
.button,
input[type="submit"],
input[type="button"] {
    background: #4f8a8b;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: #3d6d6e;
}

/* Secondary/small buttons */
.button.small {
    background: #e9ecef;
    color: #333;
    padding: 6px 12px;
    font-size: 12px;
}

.button.small:hover {
    background: #ddd;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    background: #fff;
    transition: border-color 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #4f8a8b;
    box-shadow: 0 0 0 3px rgba(79, 138, 139, 0.1);
}

/* ========================================
   FOOTER CONTROLS (Sort, Moderation, etc.)
   ======================================== */
.tfoot,
td.tfoot {
    background: #f8f9fa !important;
    padding: 12px 14px !important;
    border-top: 1px solid #eee !important;
}

.tfoot form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tfoot select {
    height: 34px;
    padding: 0 10px;
    min-width: 150px;
}

.tfoot input.button,
.tfoot input[type="submit"] {
    height: 34px;
    padding: 0 14px;
}

/* ========================================
   THREAD LEGEND
   ======================================== */
dl.thread_legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 12px 0;
    margin: 0;
}

dl.thread_legend dt {
    margin: 0;
}

dl.thread_legend dd {
    margin: 0 15px 0 4px;
    font-size: 12px;
    color: #666;
}

/* ========================================
   COLLAPSE/EXPAND BUTTONS
   ======================================== */

/* Hide the default checkbox */
.thead input[type="checkbox"],
.tcat input[type="checkbox"],
input.collapse_toggle,
.expcolimage input {
    display: none !important;
}

/* Style the collapse/expand image container */
.expcolimage {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Style collapse/expand images as nice buttons */
.thead img[src*="collapse"],
.thead img[src*="expand"],
.tcat img[src*="collapse"],
.tcat img[src*="expand"],
img.expander,
img[src*="collapse.png"],
img[src*="expand.png"],
img[src*="collapse.gif"],
img[src*="expand.gif"] {
    width: 24px !important;
    height: 24px !important;
    padding: 4px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    opacity: 0.9 !important;
}

.thead img[src*="collapse"]:hover,
.thead img[src*="expand"]:hover,
.tcat img[src*="collapse"]:hover,
.tcat img[src*="expand"]:hover,
img.expander:hover,
img[src*="collapse.png"]:hover,
img[src*="expand.png"]:hover,
img[src*="collapse.gif"]:hover,
img[src*="expand.gif"]:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

/* Alternative: If using text-based or custom toggle buttons */
.toggle_collapse,
.collapse_button,
a[onclick*="collapse"],
a[onclick*="expand"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.toggle_collapse:hover,
.collapse_button:hover,
a[onclick*="collapse"]:hover,
a[onclick*="expand"]:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.1) !important;
    text-decoration: none !important;
}

/* Style for +/- text toggles */
.thead a[href*="collapse"],
.tcat a[href*="collapse"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
}

.thead a[href*="collapse"]:hover,
.tcat a[href*="collapse"]:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    text-decoration: none !important;
}

/* Panel collapse buttons (right side) */
.float_right .expcolimage,
.thead .float_right img,
td.thead img {
    float: right;
    margin-left: 10px;
}

/* Smooth collapse animation for the content */
tbody[id^="cat_"],
div[id^="cat_"] {
    transition: all 0.3s ease !important;
}

/* Collapsed state indicator */
.collapsed .expcolimage img,
[style*="display: none"] + .expcolimage img {
    transform: rotate(-90deg);
}
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.pagination a {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.pagination a:hover {
    background: #f5f5f5;
    text-decoration: none;
}

.pagination .pagination_current {
    background: #4f8a8b;
    color: #fff;
    border: 1px solid #4f8a8b;
}

/* ========================================
   POST BUTTONS (Reply, Quote, etc.)
   ======================================== */
.postbit_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.postbit_buttons a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #444;
    transition: all 0.15s;
}

.postbit_buttons a:hover {
    background: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
}

/* ========================================
   POSTS
   ======================================== */
.post {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

.post_author {
    padding: 14px;
    background: #f8f9fa;
    border-right: 1px solid #eee;
}

.post_author .author_name a {
    font-weight: 600;
    color: #4f8a8b;
}

.post_body {
    padding: 16px 20px;
    line-height: 1.7;
    font-size: 14px;
    color: #333;
}

/* ========================================
   QUOTES & CODE
   ======================================== */
blockquote {
    background: #f8f9fa;
    border-left: 3px solid #4f8a8b;
    padding: 12px 16px;
    margin: 15px 0;
    border-radius: 0 6px 6px 0;
}

blockquote cite {
    display: block;
    font-weight: 600;
    color: #4f8a8b;
    font-style: normal;
    margin-bottom: 8px;
    font-size: 13px;
}

.codeblock,
code {
    background: #f4f4f4;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 13px;
}

.codeblock {
    padding: 12px;
    margin: 15px 0;
    overflow-x: auto;
}

code {
    padding: 2px 6px;
}

/* ========================================
   NAVIGATION / BREADCRUMBS
   ======================================== */
.navigation {
    padding: 10px 0;
    font-size: 13px;
    color: #666;
}

.navigation a {
    color: #4f8a8b;
    font-weight: 500;
}

.navigation .sep {
    margin: 0 6px;
    color: #999;
}

/* ========================================
   FOOTER
   ======================================== */
#footer {
    margin-top: 20px;
    padding: 15px 0;
    border-top: 1px solid #ddd;
    font-size: 12px;
    color: #888;
}

#footer a {
    color: #4f8a8b;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .wrapper {
        padding: 10px;
    }
    
    .trow1 td,
    .trow2 td {
        padding: 10px !important;
    }
    
    .trow1 td:nth-child(3),
    .trow2 td:nth-child(3),
    .trow1 td:nth-child(4),
    .trow2 td:nth-child(4),
    .trow1 td:nth-child(5),
    .trow2 td:nth-child(5) {
        width: 50px !important;
        font-size: 12px !important;
    }
    
    .trow1 td:nth-child(6),
    .trow2 td:nth-child(6) {
        width: 140px !important;
    }
    
    .community-welcome {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ========================================
   UTILITY OVERRIDES - FORCE CLEAN LOOK
   ======================================== */

/* Remove any lingering background colors */
table.tborder,
table.tborder tbody,
table.tborder tr {
    background: transparent !important;
}

/* Ensure no weird borders */
table.tborder {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Hide rating stars if empty - prevents gray boxes */
.trow1 td:nth-child(5):empty,
.trow2 td:nth-child(5):empty {
    background: transparent !important;
}

/* Clean up any inline styles MyBB might add */
.trow1[style],
.trow2[style] {
    background: inherit !important;
}

/* ========================================
   PORTAL PAGE STYLING
   ======================================== */

/* Portal main layout table */
body > div#container > div#content > div.wrapper > table[width="100%"] {
    border-spacing: 15px !important;
}

/* Sidebar column */
td[valign="top"][width="200"] {
    width: 240px !important;
    vertical-align: top !important;
}

/* All portal panels (tborder tables in portal) */
td[width="200"] table.tborder,
td[valign="top"][width="200"] table.tborder {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 15px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    width: 100% !important;
}

/* Portal panel headers */
td[width="200"] .thead,
td[width="200"] td.thead,
td[valign="top"][width="200"] .thead,
td[valign="top"][width="200"] td.thead {
    background: linear-gradient(135deg, #4f8a8b, #5a9a9b) !important;
    padding: 16px 18px !important;
    border-radius: 0 !important;
}

td[width="200"] .thead strong,
td[width="200"] td.thead strong,
td[valign="top"][width="200"] .thead strong,
td[valign="top"][width="200"] td.thead strong {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Portal panel content rows */
td[width="200"] .trow1,
td[width="200"] .trow1 td,
td[valign="top"][width="200"] .trow1,
td[valign="top"][width="200"] .trow1 td {
    background: #fff !important;
    padding: 16px 18px !important;
    font-size: 13px !important;
    color: #444 !important;
    line-height: 1.7 !important;
    border: none !important;
}

/* Links in portal sidebar */
td[width="200"] .trow1 a,
td[valign="top"][width="200"] .trow1 a {
    color: #4f8a8b !important;
    font-weight: 500 !important;
}

td[width="200"] .trow1 a:hover,
td[valign="top"][width="200"] .trow1 a:hover {
    color: #3d6d6e !important;
    text-decoration: underline !important;
}

/* Italic text in welcome box */
td[width="200"] .trow1 em,
td[valign="top"][width="200"] .trow1 em {
    color: #666 !important;
    font-style: italic !important;
}

/* Search input in portal */
td[width="200"] input[type="text"],
td[valign="top"][width="200"] input[type="text"] {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
}

td[width="200"] input[type="text"]:focus,
td[valign="top"][width="200"] input[type="text"]:focus {
    border-color: #4f8a8b !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(79, 138, 139, 0.1) !important;
}

/* Search button in portal */
td[width="200"] input.button,
td[valign="top"][width="200"] input.button {
    width: 100% !important;
    padding: 10px 12px !important;
}

/* Advanced search link */
td[width="200"] .smalltext,
td[valign="top"][width="200"] .smalltext {
    font-size: 12px !important;
    color: #666 !important;
    text-align: center !important;
    display: block !important;
    margin-top: 10px !important;
}

/* ========================================
   PORTAL ANNOUNCEMENTS (Main content area)
   ======================================== */

/* Announcement container */
td[valign="top"]:not([width]) table.tborder,
td[valign="top"][width=""] table.tborder {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}

/* Announcement header */
td[valign="top"]:not([width]) .thead,
td[valign="top"]:not([width]) td.thead {
    background: linear-gradient(135deg, #4f8a8b, #5a9a9b) !important;
    padding: 10px 16px !important;
    border: none !important;
}

td[valign="top"]:not([width]) .thead a,
td[valign="top"]:not([width]) td.thead a {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

td[valign="top"]:not([width]) .thead a:hover,
td[valign="top"]:not([width]) td.thead a:hover {
    color: #d0e8e8 !important;
    text-decoration: none !important;
}

/* Announcement meta bar (Posted by, Forum, etc.) - force left aligned */
td[valign="top"]:not([width]) .tcat,
td[valign="top"]:not([width]) td.tcat,
td[valign="top"]:not([width]) .tcat *,
td[valign="top"]:not([width]) td.tcat * {
    background: #fff !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    color: #888 !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    text-align: left !important;
    float: none !important;
}

td[valign="top"]:not([width]) .tcat a,
td[valign="top"]:not([width]) td.tcat a {
    color: #4f8a8b !important;
    font-weight: 500 !important;
    padding: 0 !important;
}

/* Override align="right" on Posted by row */
td[valign="top"]:not([width]) td.trow2[align="right"],
td[valign="top"]:not([width]) td[align="right"],
td[valign="top"]:not([width]) .trow2[align="right"],
td[valign="top"]:not([width]) td.trow2[align],
td.trow2[align="right"] {
    text-align: left !important;
}

td[valign="top"]:not([width]) td.trow2[align="right"] .smalltext,
td[valign="top"]:not([width]) td[align="right"] .smalltext,
td[valign="top"]:not([width]) .trow2 .smalltext,
td.trow2[align="right"] .smalltext {
    text-align: left !important;
    display: block !important;
}

/* Hide avatar/empty cells in announcements */
td[valign="top"]:not([width]) .trow1 td[width],
td[valign="top"]:not([width]) .trow1 td[valign="top"]:first-child,
td[valign="top"]:not([width]) .trow2 td[width],
td[valign="top"]:not([width]) .trow2 td[valign="top"]:first-child,
td[valign="top"]:not([width]) tr.trow1 > td:first-child,
td[valign="top"]:not([width]) tr.trow2 > td:first-child {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Announcement content - super compact */
td[valign="top"]:not([width]) .trow1,
td[valign="top"]:not([width]) .trow2 {
    background: #fff !important;
}

td[valign="top"]:not([width]) .trow1 td,
td[valign="top"]:not([width]) .trow2 td {
    background: #fff !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    border: none !important;
    text-align: left !important;
}

/* Announcement footer (print/email icons) - left aligned */
td[valign="top"]:not([width]) tfoot td,
td[valign="top"]:not([width]) .tfoot,
td[valign="top"]:not([width]) .tfoot td {
    background: #f8f8f8 !important;
    padding: 8px 16px !important;
    border: none !important;
    border-top: 1px solid #eee !important;
    text-align: left !important;
}

td[valign="top"]:not([width]) tfoot img,
td[valign="top"]:not([width]) .tfoot img {
    opacity: 0.35 !important;
    transition: opacity 0.2s !important;
    cursor: pointer !important;
    margin: 0 3px !important;
    width: 14px !important;
    height: 14px !important;
}

td[valign="top"]:not([width]) tfoot img:hover,
td[valign="top"]:not([width]) .tfoot img:hover {
    opacity: 0.6 !important;
}

/* ========================================
   PORTAL RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    td[valign="top"][width="200"] {
        width: 100% !important;
        display: block !important;
    }
    
    td[valign="top"]:not([width]) {
        display: block !important;
        width: 100% !important;
    }
}