/* ============================================================
   NetHarbor WebMail — Custom CSS
   IDs patched into SquirrelMail source:
     #nh-left        left_main.php body (folder panel)
     #nh-right       page_header.php body (inbox / compose / etc)
     #nh-folder-bar  TR: "Current Folder: INBOX | Sign Out"
     #nh-nav-bar     TR: "Compose Addresses Folders Options..."
   ============================================================ */

/* ---- Base ---- */
body, td, th, p, li, input, select, textarea {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
}
body {
  background: #e8e0f0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
a         { color: #6600cc !important; }
a:hover   { color: #330066 !important; text-decoration: underline !important; }
a:visited { color: #440088 !important; }

/* ---- Inputs & buttons ---- */
input[type="text"], input[type="password"], select, textarea {
  border: 1px solid #c0a8e0 !important;
  background: #f0e8ff !important;
  color: #222 !important;
  padding: 3px 6px !important;
  border-radius: 2px !important;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
  border-color: #6600cc !important;
  outline: none !important;
  background: #faf7ff !important;
}
input[type="submit"], input[type="button"], input[type="reset"] {
  background: linear-gradient(180deg, #7722cc 0%, #5500aa 100%) !important;
  color: #fff !important;
  border: 1px solid #440088 !important;
  padding: 3px 12px !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  font-weight: bold !important;
  font-size: 11px !important;
}
input[type="submit"]:hover, input[type="button"]:hover { background: #6600cc !important; }
select { background: #f0e8ff !important; border: 1px solid #c0a8e0 !important; color: #330066 !important; border-radius: 2px !important; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
#nh-login-wrap   { width: 380px; margin: 60px auto 20px auto; }
#nh-login-logo   { text-align: center; margin-bottom: 12px; }
#nh-login-logo img { max-height: 65px; max-width: 280px; }
#nh-login-card   { border: 1px solid #aaaacc; border-radius: 3px; background: #fff; box-shadow: 0 2px 12px rgba(46,0,96,.25); overflow: hidden; }
#nh-login-header { background: linear-gradient(180deg, #2d0060 0%, #1a0035 100%); color: #fff; font-size: 13px; font-weight: bold; padding: 8px 14px; border-bottom: 2px solid #6600cc; letter-spacing: .3px; }
#nh-login-body   { padding: 16px 14px 12px; background: #f0eeff; }
#nh-login-body input[type="text"], #nh-login-body input[type="password"] { background: #fff !important; border: 1px solid #c0a8e0 !important; padding: 4px 7px !important; width: 200px !important; }
#nh-login-body input[type="submit"] { background: linear-gradient(180deg, #ffcc00 0%, #cc9900 100%) !important; color: #330066 !important; border: 1px solid #aa7700 !important; padding: 5px 20px !important; margin-top: 4px !important; }
#nh-login-body input[type="submit"]:hover { background: #ffee44 !important; }
.nh-label    { color: #444; font-size: 12px; white-space: nowrap; padding-right: 8px; }
#nh-login-footer { text-align: center; font-size: 10px; color: #aaa; margin-top: 10px; padding-bottom: 4px; }

/* ============================================================
   LEFT PANEL — #nh-left
   Structure: body > table > tr > td >
     [header: Folders bold, date, (Check mail)]
     [folder items: span > tt + a ]<br>  each
   ============================================================ */
#nh-left {
  background: #1a0035 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* All text in left panel */
#nh-left, #nh-left td, #nh-left font, #nh-left span, #nh-left small {
  color: #9977cc !important;
  background: transparent !important;
}

/* Bold section title ("Folders") */
#nh-left b, #nh-left strong {
  color: #ffcc00 !important;
  font-size: 13px !important;
}

/* Folder name spans — block so each is its own row */
#nh-left span {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the <br> that SM puts after each folder span — the block span already breaks */
#nh-left span + br {
  display: none !important;
}

/* Folder links inside span — fill the span */
#nh-left span a {
  display: block !important;
  color: #cc99ff !important;
  text-decoration: none !important;
  padding: 3px 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#nh-left span a:hover {
  color: #ffffff !important;
  background: #2d0060 !important;
  text-decoration: none !important;
}

/* Header area links (Check mail) — keep inline, style subtly */
#nh-left small a {
  color: #7755aa !important;
  display: inline !important;
  padding: 0 !important;
  text-decoration: none !important;
  font-size: 11px !important;
}
#nh-left small a:hover { color: #cc99ff !important; text-decoration: underline !important; }

/* Date / last refresh text */
#nh-left small { font-size: 10px !important; color: #664488 !important; line-height: 1.4 !important; }

/* Header area table — compact */
#nh-left table table td { padding: 2px 10px 6px 10px !important; }

/* Unread count (gold via font color set by theme) */
#nh-left font[color="#ffcc00"] { color: #ffcc00 !important; }

/* Divider lines */
#nh-left hr { border: none !important; border-top: 1px solid #330055 !important; margin: 3px 0 !important; }

/* ============================================================
   CURRENT FOLDER BAR — #nh-folder-bar
   "Current Folder: INBOX                         Sign Out"
   ============================================================ */
#nh-folder-bar {
  background: linear-gradient(180deg, #2d0060 0%, #1a0035 100%) !important;
}
#nh-folder-bar td {
  background: transparent !important;
  color: #e0ccff !important;
  padding: 5px 10px !important;
  border-bottom: 2px solid #6600cc !important;
  font-size: 11px !important;
  font-weight: bold !important;
}
#nh-folder-bar td a {
  color: #ffcc00 !important;
  text-decoration: none !important;
  font-weight: bold !important;
  padding: 1px 5px !important;
}
#nh-folder-bar td a:hover { color: #fff !important; background: #440088 !important; border-radius: 2px !important; }

/* ============================================================
   NAV LINKS BAR — #nh-nav-bar
   "Compose  Addresses  Folders  Options  Search  Help"
   ============================================================ */
#nh-nav-bar { background: #1a0035 !important; }
#nh-nav-bar td { background: transparent !important; padding: 4px 6px !important; border-bottom: 1px solid #440088 !important; }
#nh-nav-bar td a {
  color: #cc99ff !important;
  text-decoration: none !important;
  font-weight: bold !important;
  font-size: 12px !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
}
#nh-nav-bar td a:hover { color: #fff !important; background: #2d0060 !important; text-decoration: none !important; }
#nh-nav-bar td[align="right"] a { color: #664488 !important; font-weight: normal !important; font-size: 10px !important; }

/* ============================================================
   MESSAGE LIST — inside #nh-right
   SM emits nested tables for the message list.
   Use descendant selectors scoped to #nh-right.
   ============================================================ */

#nh-right { background: #e8e0f0 !important; margin: 0 !important; padding: 0 !important; }

/* Outermost page table — give some padding */
#nh-right > table { margin: 0 !important; }

/* ---- Toolbar area ("Toggle All", "Move Selected To") ---- */
/* SM wraps toolbar in table[border=0 width=100%] > tr[bgcolor=color[0]] > td > table[bgcolor=color[4]] */
/* The purple-bg TR creates the module-head look for toolbar sections */
#nh-right tr[bgcolor] td {
  padding: 4px 8px !important;
}

/* ---- Column header row (From / Date / Subject) ---- */
/* This is the first TR of the inner message-list table (inside a 1px-border wrapper) */
#nh-right table table table tr:first-child td,
#nh-right table table table tr:first-child th {
  background: linear-gradient(180deg, #7722cc 0%, #5500aa 100%) !important;
  color: #ffffff !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 10px !important;
  padding: 6px 8px !important;
}
/* Sort links in headers */
#nh-right table table table tr:first-child td a,
#nh-right table table table tr:first-child td img {
  color: #ddaaff !important;
  display: inline !important;
  background: none !important;
  padding: 0 2px !important;
}

/* ---- Message rows ---- */
#nh-right table table table tr td {
  background: #ffffff !important;
  color: #333 !important;
  padding: 5px 8px !important;
  border-bottom: 1px solid #ede8ff !important;
  vertical-align: middle !important;
}
/* Alternate row tint */
#nh-right table table table tr:nth-child(even) td {
  background: #faf7ff !important;
}
/* Row hover */
#nh-right table table table tr:hover td {
  background: #e8d8ff !important;
}

/* Message links (sender, subject) */
#nh-right table table table tr td a {
  color: #330066 !important;
  text-decoration: none !important;
  display: inline !important;
  background: none !important;
  padding: 0 !important;
  font-weight: normal !important;
}
#nh-right table table table tr td a:hover {
  color: #6600cc !important;
  text-decoration: underline !important;
}

/* ============================================================
   COMPOSE
   ============================================================ */
textarea[name="body"] {
  background: #fff !important;
  border: 1px solid #c0a8e0 !important;
  padding: 8px !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 12px !important;
  border-radius: 2px !important;
}

/* ============================================================
   MISC
   ============================================================ */
input[type="checkbox"] { cursor: pointer !important; accent-color: #6600cc !important; }