/* ==========================================================================
   css/theme/social.css — area partial of the KG unified theme.
   Scope: MESSAGING (mess.php, messver.php), TRANSACTIONS (transaktionen.php,
   austransaktionen.php, neueueberweisung.php) and CONTACTS (kontakte.php).

   Goal: bring the remaining legacy <font>/<table> markup on these pages in
   line with the dark-navy + orange palette already established in
   css/kg-theme.css and css/transaktionen-modern.css. Token-based, additive,
   every selector scoped under #main-content so the rest of the game is safe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared section navigation toolbar (Posteingang | Neue Nachricht | ...)
      Legacy renders these as a centered <b><font size=3> row of .link4 anchors
      separated by red pipes. Turn it into a cohesive pill-style toolbar.
   -------------------------------------------------------------------------- */
#main-content center > b > font[size="3"],
#main-content div[style*="text-align: center"] > b > span[style*="small"] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 2px;
    max-width: 760px;
    margin: 0 auto 6px;
    padding: 8px 12px;
    background: var(--kg-surface);
    border: 1px solid var(--kg-line);
    border-radius: var(--kg-radius);
    box-shadow: var(--kg-shadow);
    font-size: 13px !important;
    line-height: 1.9;
}

/* The "|" separators (red <font>/<span>) -> muted subtle dividers */
#main-content center > b > font[size="3"] > font[color="#AC0000"],
#main-content div[style*="text-align: center"] span[style*="#AC0000"] {
    color: var(--kg-line) !important;
    margin: 0 4px;
}

/* Nav anchors -> comfortable padded links; current/white ones get the accent */
#main-content center > b > font[size="3"] a.link4,
#main-content div[style*="text-align: center"] a.link4 {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--kg-radius-sm);
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
#main-content center > b > font[size="3"] a.link4:hover,
#main-content div[style*="text-align: center"] a.link4:hover {
    background: var(--kg-surface-3);
    color: var(--kg-accent-2) !important;
}
/* The "active" tab is the one wrapping a white <font>/<span> label */
#main-content center > b > font[size="3"] a.link4 font[color="#FFFFFF"],
#main-content center > b > font[size="3"] a.link4 font[color="#ffffff"],
#main-content div[style*="text-align: center"] a.link4 span[style*="#FFFFFF"] {
    color: var(--kg-accent) !important;
}

/* --------------------------------------------------------------------------
   2. Message inbox table (mess.php)
      Legacy <table bgcolor="#BAB3B4" width="600px"> with .messages-head header
      cells and .tr_unread / .tr_read body rows. Modernise into a rounded,
      shadowed dark data table.
   -------------------------------------------------------------------------- */
#main-content table[bgcolor="#BAB3B4"],
#main-content table[bgcolor="#bab3b4"] {
    width: 100% !important;
    max-width: 720px;
    margin: 10px auto !important;
    background: var(--kg-surface) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius);
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    box-shadow: var(--kg-shadow);
    font-size: 13px;
}

/* Header row */
#main-content td.messages-head {
    background: var(--kg-surface-3) !important;
    color: var(--kg-accent-2) !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 10px 12px !important;
    border: none !important;
    border-bottom: 2px solid var(--kg-line) !important;
    text-align: left;
}

/* Body cells — comfortable padding, subtle row separators, readable text */
#main-content tr.tr_unread > td,
#main-content tr.tr_read > td {
    padding: 9px 12px !important;
    border: none !important;
    border-bottom: 1px solid var(--kg-line) !important;
    vertical-align: middle;
    color: var(--kg-text-1) !important;
}

/* Bump the tiny legacy <font size=2> message text up to a readable size */
#main-content tr.tr_unread font,
#main-content tr.tr_read font,
#main-content tr.tr_unread span,
#main-content tr.tr_read span {
    font-size: 13px !important;
}

/* Sender / subject links inside the table */
#main-content tr.tr_unread a.link17,
#main-content tr.tr_read a.link17 {
    color: var(--kg-text-1) !important;
    text-decoration: none;
    transition: color .15s ease;
}
#main-content tr.tr_unread a.link17:hover,
#main-content tr.tr_read a.link17:hover {
    color: var(--kg-accent) !important;
}
/* Legacy hard-coded subject colours (#00006D for System) -> on-theme accent */
#main-content tr.tr_unread font[color="#00006D"],
#main-content tr.tr_read font[color="#00006D"] {
    color: var(--kg-accent-2) !important;
}

/* Read vs. unread visual weight */
#main-content tr.tr_read {
    background: transparent;
}
#main-content tr.tr_read:hover > td {
    background: var(--kg-surface-2) !important;
}

/* Unread rows: subtle highlight + orange left accent */
#main-content tr.tr_unread {
    background: var(--kg-surface-2);
}
#main-content tr.tr_unread > td:first-child {
    box-shadow: inset 3px 0 0 var(--kg-accent);
}
#main-content tr.tr_unread:hover > td {
    background: var(--kg-surface-3) !important;
}
/* The red "»" unread markers in read rows -> on-theme accent */
#main-content tr.tr_read font[color="red"] {
    color: var(--kg-accent) !important;
}

/* Clickable subject cells get a pointer affordance already; reinforce hover */
#main-content tr.tr_unread td[onClick],
#main-content tr.tr_read td[onClick] {
    cursor: pointer;
}

/* Checkboxes a touch larger / accented */
#main-content table[bgcolor="#BAB3B4"] input[type="checkbox"],
#main-content table[bgcolor="#bab3b4"] input[type="checkbox"] {
    accent-color: var(--kg-accent);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. Inbox action bar (Markierte löschen | Als gelesen | ... )
      Legacy uses borderless submit inputs coloured #BAB3B4 with background gifs.
      The foundation already gives buttons a gradient; here we make the bar read
      as one cohesive toolbar and drop the broken background-image / grey text.
   -------------------------------------------------------------------------- */
#main-content form[name="myform"] + br + br,
#main-content form[name="myform"] table[align="left"] {
    margin-top: 10px;
}
#main-content form[name="myform"] table[align="left"] td {
    padding: 4px 6px !important;
    border: none !important;
}
/* Suppress the stray grey "|" separators between the action buttons */
#main-content form[name="myform"] td font[color="#BAB3B4"] {
    color: var(--kg-line) !important;
    padding: 0 2px;
}
/* Action submit buttons: the inline styles set tiny grey borderless text on a
   broken background gif. Re-style as compact secondary buttons. */
#main-content form[name="myform"] input[type="submit"] {
    background: var(--kg-surface-3) !important;
    background-image: none !important;
    color: var(--kg-text-1) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius-sm) !important;
    height: auto !important;
    padding: 6px 12px !important;
    margin: 2px 1px;
    font-size: 12px !important;
    font-weight: 600;
}
#main-content form[name="myform"] input[type="submit"]:hover {
    background: var(--kg-accent) !important;
    color: #fff !important;
    border-color: var(--kg-accent) !important;
}

/* --------------------------------------------------------------------------
   4. Inbox capacity bar (.table-messphp-400) — tame the retro pro.gif bar so it
      sits as a slim labelled meter inside a dark frame. The bar background gifs
      load from the CDN; we keep them but soften the surrounding chrome.
   -------------------------------------------------------------------------- */
#main-content table.table-messphp-400 {
    width: 100% !important;
    max-width: 720px;
    margin: 8px auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
#main-content table.table-messphp-400 td {
    border-color: var(--kg-line) !important;
    color: var(--kg-text-1) !important;
}
#main-content table.table-messphp-400 font {
    font-size: 13px !important;
    color: var(--kg-text-1) !important;
}

/* "Keine Nachrichten im Posteingang" empty state */
#main-content center > font[size="2"] > i {
    display: inline-block;
    margin: 14px auto;
    color: var(--kg-text-2) !important;
    font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   5. Compose message form (messver.php)
      Legacy: <font size=2 color=white> labels + BAB3B4 inputs/textarea in a
      bare <table>. The foundation already restyles the inputs; here we fix the
      label typography, vertical rhythm and the preview block.
   -------------------------------------------------------------------------- */
#main-content form[name="form"] table {
    margin: 0 auto;
}
#main-content form[name="form"] td {
    border: none !important;
    padding: 6px 8px !important;
    vertical-align: top;
}
/* Field labels: legacy tiny white <font>/<span> -> readable muted labels */
#main-content form[name="form"] td font[color="white"],
#main-content form[name="form"] td span[color="white"],
#main-content form[name="form"] td font[color="#ffffff"] {
    color: var(--kg-text-2) !important;
    font-size: 13px !important;
    font-weight: 600;
}
/* Give the compose inputs / textarea room to breathe and full width */
#main-content form[name="form"] input[name="he"],
#main-content form[name="form"] input[name="hum"],
#main-content form[name="form"] select[name="hu"],
#main-content form[name="form"] textarea[name="bo"] {
    width: 100% !important;
    max-width: 360px;
    box-sizing: border-box;
}
#main-content form[name="form"] textarea[name="bo"] {
    min-height: 220px;
    line-height: 1.5;
}
/* [ Eingabe ] / [ Kontakte ] mode-switch links */
#main-content form[name="form"] a.link9,
#main-content a.link9 {
    color: var(--kg-accent) !important;
    text-decoration: none;
    font-size: 12px;
}
#main-content form[name="form"] a.link9:hover,
#main-content a.link9:hover {
    color: var(--kg-accent-2) !important;
    text-decoration: underline;
}
/* "Signatur anhängen" hint text */
#main-content form[name="form"] span[style*="x-small"] {
    color: var(--kg-text-2) !important;
    font-size: 12px !important;
}

/* Preview block ("Vorschau:") — legacy bgcolor=#BAB3B4 cell. The foundation
   recolours the cell; ensure the rendered message text is light & readable. */
#main-content table tr td[bgcolor="#BAB3B4"][valign="top"],
#main-content table tr td[bgcolor="#bab3b4"][valign="top"] {
    background: var(--kg-surface-2) !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: var(--kg-radius-sm);
    color: var(--kg-text-1) !important;
    padding: 10px !important;
}
#main-content td[bgcolor="#BAB3B4"][valign="top"] font,
#main-content td[bgcolor="#bab3b4"][valign="top"] font,
#main-content td[bgcolor="#BAB3B4"][valign="top"] div,
#main-content td[bgcolor="#bab3b4"][valign="top"] div {
    color: var(--kg-text-1) !important;
    font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   6. Inline status / OK / error boxes used across messaging
      (bgcolor #132d3d = success/green, #2a2636 = warning/orange). The
      foundation remaps the backgrounds; here we round them and lift the text.
   -------------------------------------------------------------------------- */
#main-content table[bgcolor="#132d3d"],
#main-content td[bgcolor="#132d3d"],
#main-content table[bgcolor="#2a2636"],
#main-content td[bgcolor="#2a2636"] {
    border-radius: var(--kg-radius-sm) !important;
    color: var(--kg-text-1) !important;
}
#main-content td[bgcolor="#132d3d"] {
    border: 1px solid var(--kg-success) !important;
}
#main-content td[bgcolor="#2a2636"] {
    border: 1px solid var(--kg-accent) !important;
}
#main-content table[bgcolor="#132d3d"] font,
#main-content td[bgcolor="#132d3d"] span,
#main-content table[bgcolor="#2a2636"] span,
#main-content td[bgcolor="#2a2636"] span {
    color: var(--kg-text-1) !important;
}

/* --------------------------------------------------------------------------
   7. Contacts page (kontakte.php)
      Two-column "Buddy hinzufügen" / "Buddy löschen" layout with white <font>
      headings and a plain list of contacts.
   -------------------------------------------------------------------------- */
#main-content form[action*="neuerkontakt"] {
    display: block;
    margin-top: 6px;
}
/* Section headings ("Buddy hinzufügen:" / "Buddy löschen:") */
#main-content p > b > font[color="white"],
#main-content b > font[color="white"] {
    color: var(--kg-accent-2) !important;
    font-size: 14px !important;
}
/* The "Buddy hinzufügen" input */
#main-content input#hu {
    width: 100% !important;
    max-width: 220px;
    box-sizing: border-box;
}
/* Contact list rows -> light, comfortably spaced */
#main-content a[href*="konloeschen"] {
    margin-left: 6px;
    vertical-align: middle;
}
#main-content table[valign="top"] td > span[style*="#ffffff"],
#main-content table[valign="top"] td > span[style*="color: #ffffff"] {
    color: var(--kg-text-1) !important;
    display: inline-block;
    padding: 5px 0;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   8. Transaction pages (transaktionen.php / austransaktionen.php /
      neueueberweisung.php) already ship a modern stylesheet
      (css/transaktionen-modern.css). Add only light cohesion so they share the
      same shadow / radius language as the messaging tables above and pin token
      colours in case of palette drift.
   -------------------------------------------------------------------------- */
#main-content .transaktionen-nav {
    box-shadow: var(--kg-shadow);
    border-radius: var(--kg-radius);
}
#main-content .transaktion-card {
    box-shadow: var(--kg-shadow);
}
#main-content .transaktion-header {
    color: var(--kg-accent-2);
}
#main-content .transaktion-header.unread {
    box-shadow: inset 3px 0 0 var(--kg-accent);
}
#main-content .transaktionen-money,
#main-content .transaktion-money {
    color: var(--kg-success);
    font-weight: 700;
}
/* Empty-state cards on a dark surface for consistency with messaging */
#main-content .transaktionen-empty {
    background: var(--kg-surface);
    border: 1px solid var(--kg-line);
    border-radius: var(--kg-radius);
    color: var(--kg-text-2);
}
/* Transfer form fields: align labels with the messaging form rhythm */
#main-content .transaktionen-field > span {
    color: var(--kg-text-2);
    font-weight: 600;
    font-size: 13px;
}