/* ==========================================================================
   Tiongson Law admin - readability + mobile/desktop layout (added 2026)
   Loaded after the original styles, so it only overrides what it needs to.
   ========================================================================== */

:root {
  --tl-bg: #000000;
  --tl-panel: #14110f;
  --tl-row: #1c1916;
  --tl-row-alt: #24201c;
  --tl-row-hover: #2f2924;
  --tl-border: #3a322b;
  --tl-text: #efe6dc;
  --tl-muted: #b9a999;
  --tl-head-bg: #7a1414;
  --tl-head-text: #ffffff;
  --tl-accent: #ffcc33;
  --tl-link: #ffb347;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--tl-bg);
  color: var(--tl-text);
  font-family: Arial, Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- Fluid frame: 900px on desktop, full width on small screens ---------- */
.tl-shell, .tl-frame {
  width: 100% !important;
  max-width: 900px;
  box-sizing: border-box;
}
.tl-shell img, .tl-frame img { max-width: 100%; height: auto; }

/* ---------- Content area ---------- */
.tl-content {
  color: var(--tl-text);
  padding: 8px 14px 16px !important;
  background-size: 100% auto;
}
.tl-content h2 {
  color: var(--tl-accent);
  font: bold 22px Georgia, "Times New Roman", serif;
  margin: 14px 0 12px;
}
.tl-content td, .tl-content th, .tl-content p, .tl-content li,
.tl-content div, .tl-content span, .tl-content font, .tl-content label {
  color: var(--tl-text);
  font-size: 14px;
}
.tl-content a { color: var(--tl-link); }
.tl-content a:hover { color: var(--tl-accent); }
.tl-content strong, .tl-content b { color: var(--tl-accent); }

/* ---------- Data tables (lists of users, clients, documents...) ---------- */
.tl-content table.bgtablelist,
.tl-content table.tl-data {
  width: 100% !important;
  border-collapse: collapse;
  background: var(--tl-panel) !important;
  border: 1px solid var(--tl-border);
}
.tl-content table.bgtablelist td,
.tl-content table.tl-data td,
.tl-content table.tl-data th {
  padding: 9px 10px;
  border: 1px solid var(--tl-border);
  vertical-align: middle;
  height: auto !important;
  overflow-wrap: break-word;
}
.tl-content table.bgtablelist tr:nth-child(odd) td,
.tl-content table.tl-data tr:nth-child(odd) td { background: var(--tl-row) !important; }
.tl-content table.bgtablelist tr:nth-child(even) td,
.tl-content table.tl-data tr:nth-child(even) td { background: var(--tl-row-alt) !important; }
.tl-content table.bgtablelist tr:hover td,
.tl-content table.tl-data tr:hover td { background: var(--tl-row-hover) !important; }

/* header row */
.tl-content .tblheader,
.tl-content table.bgtablelist tr:first-child td,
.tl-content table.tl-data th,
.tl-content .headerlist,
.tl-content .headerlink {
  background: var(--tl-head-bg) !important;
  color: var(--tl-head-text) !important;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  word-break: normal;
}
.tl-content table.bgtablelist tr:first-child:hover td { background: var(--tl-head-bg) !important; }
.tl-content table.bgtablelist img { vertical-align: middle; margin: 0 3px; }

/* ---------- Forms ---------- */
.tl-content table.bgtable {
  background: var(--tl-panel) !important;
  border: 1px solid var(--tl-border);
  max-width: 100%;
}
.tl-content table.bgtable td { padding: 6px 8px; }
.tl-content input[type=text], .tl-content input[type=password], .tl-content input[type=email],
.tl-content input[type=file], .tl-content select, .tl-content textarea {
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid #5a4d42;
  border-radius: 3px;
  background: #f4efe9;
  color: #111;
  max-width: 100%;
  box-sizing: border-box;
}
.tl-content input[type=submit], .tl-content input[type=button], .tl-content button {
  font-size: 14px;
  padding: 7px 16px;
  cursor: pointer;
}

/* ---------- Mobile navigation (hidden on desktop) ---------- */
.tl-mobile-nav { display: none; }

/* ==========================================================================
   Phones and small tablets
   ========================================================================== */
@media (max-width: 760px) {
  body { margin: 0 !important; }

  .tl-shell { border-width: 0 !important; }
  .tl-shell > tbody > tr > td { padding: 0 !important; }

  /* swap the image-sliced desktop menu for a simple touch menu */
  .tl-nav-row, .tl-divider-row, .tl-footer-row, .tl-spacer-row { display: none !important; }

  .tl-mobile-nav {
    display: block;
    background: #1a1512;
    border-top: 2px solid #5e0000;
    border-bottom: 2px solid #5e0000;
    padding: 8px 10px 10px;
  }
  .tl-mobile-nav .tl-links { display: flex; flex-wrap: wrap; gap: 6px; }
  .tl-mobile-nav a {
    flex: 1 1 calc(33.33% - 6px);
    min-width: 92px;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 6px;
    background: #5e0000;
    color: #fff !important;
    font: bold 13px Arial, sans-serif;
    border-radius: 4px;
    text-decoration: none !important;
  }
  .tl-mobile-nav a.tl-sub { background: #33261d; font-weight: normal; }
  .tl-mobile-nav form { display: flex; gap: 6px; margin: 8px 0 0; }
  .tl-mobile-nav input[type=text] {
    flex: 1; min-width: 0; font-size: 16px; padding: 9px 10px;
    border: 1px solid #5a4d42; border-radius: 4px; background: #f4efe9; color: #111;
  }
  .tl-mobile-nav button {
    padding: 9px 14px; font-size: 15px; border: 0; border-radius: 4px;
    background: #ffcc33; color: #000; font-weight: bold;
  }

  .tl-content { padding: 6px 10px 14px !important; overflow-x: auto; background-image: none !important; }
  .tl-content h2 { font-size: 20px; }

  /* any wide fixed-width table inside the content shrinks to the screen */
  .tl-content table { max-width: 100% !important; }
  .tl-content table[width] { width: 100% !important; }

  /* data tables become one card per record */
  .tl-content table.tl-cards,
  .tl-content table.tl-cards > tbody,
  .tl-content table.tl-cards > tbody > tr,
  .tl-content table.tl-cards > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
  .tl-content table.tl-cards { border: 0; background: transparent !important; }
  .tl-content table.tl-cards > tbody > tr.tl-head { display: none; }
  .tl-content table.tl-cards > tbody > tr {
    margin: 0 0 12px;
    border: 1px solid var(--tl-border);
    border-left: 4px solid var(--tl-head-bg);
    border-radius: 4px;
    overflow: hidden;
  }
  .tl-content table.tl-cards > tbody > tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--tl-border) !important;
    padding: 8px 10px 8px 42% !important;
    position: relative;
    text-align: left !important;
    min-height: 36px;
  }
  .tl-content table.tl-cards > tbody > tr > td:last-child { border-bottom: 0 !important; }
  .tl-content table.tl-cards > tbody > tr > td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 8px;
    width: calc(42% - 18px);
    color: var(--tl-muted);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: normal;
  }
  .tl-content table.tl-cards > tbody > tr > td[data-label=""] { padding-left: 10px !important; }

  /* form tables: label above field */
  .tl-content table.bgtable, .tl-content table.bgtable > tbody,
  .tl-content table.bgtable > tbody > tr, .tl-content table.bgtable > tbody > tr > td {
    display: block; width: 100% !important; box-sizing: border-box;
  }
  .tl-content input[type=text], .tl-content input[type=password], .tl-content input[type=email],
  .tl-content select, .tl-content textarea { width: 100% !important; font-size: 16px; }
}

/* spacer.gif is missing on the server: keep those layout images 1px tall */
img[src*="spacer.gif"] { height: 1px !important; visibility: hidden; }

/* ---------- Login page: the box is one sliced image, so scale it as a whole ---------- */
.tl-login-wrap input[type=text], .tl-login-wrap input[type=password] { font-size: 14px; padding: 4px 6px; }
@media (max-width: 470px) { .tl-login-wrap { zoom: 0.84; } }
@media (max-width: 400px) { .tl-login-wrap { zoom: 0.78; } }
@media (max-width: 350px) { .tl-login-wrap { zoom: 0.7; } }