/* friendnet — 2008 "New Facebook" look: slim blue bar, white page, 980px grid,
   Lucida Grande 11px, gray #ccc boxes, blue-gray buttons */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  font-size: 11px;
  color: #333;
  background: #fff;
}

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

/* Slim top bar */
#header {
  background: #3b5998;
  border-bottom: 1px solid #133783;
}
.header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}
.logo {
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: -0.5px;
}
.logo:hover { text-decoration: none; }
.header-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.header-nav a, .linklike {
  color: #fff;
  padding: 3px 7px;
  border-radius: 2px;
}
.header-nav a:hover, .linklike:hover {
  background: #4b67a1;
  text-decoration: none;
}
.logout-form { display: inline; }
/* Unread-notification counter in the header (Phase 6) */
.navbadge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  background: #c43c35;
  color: #fff;
  border-radius: 7px;
  font-size: 10px;
  font-weight: bold;
  vertical-align: 1px;
}
/* "new" marker on the /notifications list */
.notif-new {
  display: inline-block;
  padding: 0 4px;
  background: #fff9d7;
  border: 1px solid #e2c822;
  border-radius: 2px;
  font-size: 10px;
  font-weight: bold;
  color: #7a6a00;
}
.linklike {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
/* Link-styled button for use inside content boxes (remove/cancel/unblock/block) */
.linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #3b5998;
}
.linkbtn:hover { text-decoration: underline; }

/* Page layout */
#page {
  max-width: 980px;
  margin: 12px auto;
  padding: 0 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#sidebar { width: 160px; flex-shrink: 0; }
#content { flex: 1; min-width: 0; }

.searchbox { position: relative; margin-bottom: 10px; }
.searchbox input {
  width: 100%;
  border: 1px solid #bdc7d8;
  font: inherit;
  padding: 3px;
}
.search-hint { color: #999; margin-top: 2px; font-size: 10px; }

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #bdc7d8;
  border-top: none;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid #eee;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-avatar {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid #ccc;
}
.search-result-avatar-empty { background: #eee; }
.search-result-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.search-result-status { font-size: 10px; color: #999; white-space: nowrap; }
.search-add-btn {
  background: #5b74a8;
  color: #fff;
  border: 1px solid #29447e;
  font: inherit;
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.search-add-btn:hover { background: #4f679a; }
.search-add-btn:disabled { opacity: 0.6; cursor: default; }
.search-empty { padding: 6px; color: #999; font-size: 11px; }

.navlist { list-style: none; border-top: 1px solid #e5e5e5; }
.navlist li a {
  display: block;
  padding: 4px 4px;
  border-bottom: 1px solid #e5e5e5;
  color: #3b5998;
}
.navlist li a:hover { background: #eff2f7; text-decoration: none; }

/* Boxes — 2008 style: gray borders, bold dark headers on white */
.box {
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 12px;
}
.box-header {
  color: #333;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 8px;
  border-bottom: 1px solid #e5e5e5;
  background: #f7f7f7;
}
.box-body { padding: 8px; }
.editlink { font-weight: normal; font-size: 11px; float: right; }

/* Collapsible sections (profile-edit): native <details>/<summary>, styled to
   match the existing .box-header look with an expand/collapse indicator. */
summary.box-header {
  cursor: pointer;
  list-style: none;
}
summary.box-header::-webkit-details-marker { display: none; }
summary.box-header::before { content: "\25b8  "; }
details[open] > summary.box-header::before { content: "\25be  "; }

.centered-narrow { max-width: 460px; margin: 40px auto; }

/* Login-page hero: full-bleed 2008-blue band across the top of the screen.
   The negative side margins pull it out of the 980px #page column; the empty
   slim header is hidden on splash pages so the band starts at the very top. */
.splash #header { display: none; }
.hero {
  margin: -12px calc(50% - 50vw) 0;
  padding: 56px 20px 48px;
  text-align: center;
  background: #3b5998;
  background: linear-gradient(#4565a8, #3b5998 55%, #2f477e);
  border: none;
  border-bottom: 1px solid #133783;
}
.hero-logo {
  font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  font-size: 96px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -5px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.hero-tagline {
  margin-top: 18px;
  font-size: 19px;
  color: #d9e3f7;
}
@media (max-width: 640px) {
  .hero { padding: 36px 12px 32px; }
  .hero-logo { font-size: 52px; letter-spacing: -3px; }
  .hero-tagline { font-size: 15px; }
}

/* Forms */
.formtable td { padding: 4px; vertical-align: middle; }
.formtable .label { text-align: right; color: #666; white-space: nowrap; }
.formtable input[type="text"],
.formtable input[type="password"] {
  border: 1px solid #bdc7d8;
  font: inherit;
  padding: 3px;
  width: 200px;
}
.btn {
  background: #5b74a8;
  color: #fff;
  border: 1px solid #29447e;
  border-top-color: #8a9cc4;
  font: inherit;
  font-weight: bold;
  padding: 3px 9px;
  cursor: pointer;
}
.btn:hover { background: #4f679a; }
.hint { color: #999; font-size: 10px; }
.form-error {
  background: #ffebe8;
  border: 1px solid #dd3c10;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.smallprint { color: #808080; text-align: center; margin-top: 10px; }
.muted { color: #808080; }
.mb { margin-bottom: 8px; }

/* Data tables */
.datatable { border-collapse: collapse; width: 100%; }
.datatable th, .datatable td {
  border-bottom: 1px solid #e5e5e5;
  padding: 4px 6px;
  text-align: left;
}
.datatable th { color: #666; font-weight: bold; background: #f7f7f7; }
.datatable code { font-size: 11px; }

/* Footer */
#footer {
  max-width: 980px;
  margin: 20px auto;
  padding: 8px 10px;
  color: #999;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

/* ---------- Phase 4: profile customization ---------- */

.pre { white-space: pre-line; }
.saved-msg { color: #3b5998; font-weight: bold; }

.pf-banner img { display: block; width: 100%; max-height: 240px; object-fit: cover; border: 1px solid #ccc; border-bottom: none; }
.pf-head { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; background: #3b5998; color: #fff; }
.pf-head-name { font-size: 16px; font-weight: bold; }
.pf-head-name .editlink { color: inherit; }
.pf-head-status { margin-top: 5px; }
.pf-head-meta { margin-top: 5px; font-size: 10px; opacity: .85; }

.pf-cols { display: flex; gap: 10px; align-items: flex-start; }
.pf-cols.pf-one { display: block; }
.pf-side { width: 180px; flex-shrink: 0; }
.pf-one .pf-side { width: auto; }
.pf-main { flex: 1; min-width: 0; }

.pf-avatar img { display: block; width: 100%; }
.pf-avatar-empty { background: #eee; color: #999; text-align: center; padding: 40px 0; }

.pf-tabs { margin-bottom: 10px; border-bottom: 1px solid #ccc; }
.pf-tabs a { display: inline-block; padding: 4px 14px; border: 1px solid #ccc; border-bottom: none; background: rgba(0,0,0,.03); margin-right: 3px; position: relative; top: 1px; }
.pf-tabs a:hover { text-decoration: none; }
.pf-tabs a.active { background: #3b5998; color: #fff; border-color: #3b5998; font-weight: bold; }

.infotable td { padding: 3px 6px; vertical-align: top; }
.infotable .label { color: #666; white-space: nowrap; text-align: right; width: 110px; }

/* edit page */
.colorgrid { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 4px; max-width: 420px; }
.colorgrid label { display: flex; align-items: center; gap: 6px; }
.colorgrid input[type="color"] { width: 34px; height: 20px; padding: 0; border: 1px solid #999; }
.patterngrid { display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px; }
.patternopt { display: flex; align-items: center; gap: 4px; border: 1px solid #ddd; padding: 3px 6px; font-size: 10px; }
.swatch { display: inline-block; width: 34px; height: 24px; border: 1px solid #bbb; background-color: #fff; }
.customslot { margin-bottom: 8px; }
.customslot input[type="text"] { display: block; margin-bottom: 3px; width: 320px; }
#boxlist tr.dragging { opacity: .4; }
#boxlist .draghandle { cursor: move; }
.thumb { max-width: 60px; max-height: 60px; vertical-align: middle; margin-right: 6px; border: 1px solid #ccc; }
.thumb-wide { max-width: 160px; }

/* Messages (Phase 5) */
.msg { border-bottom: 1px solid #e5e5e5; padding: 6px 4px; }
.msg:last-child { border-bottom: none; }
.msg-author { font-weight: bold; color: #3b5998; }
.msg-mine .msg-author { color: #666; }
.msg-time { font-size: 10px; margin-left: 6px; }
.msg-body { white-space: pre-line; margin-top: 2px; }
.msg-preview { font-size: 10px; margin-top: 2px; }
.msg-input { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid #bdc7d8; padding: 3px; margin-bottom: 6px; }
.unread-count { color: #3b5998; margin-left: 4px; }
.pf-head-meta a { color: inherit; }

/* ---------- Mobile responsiveness (phones/small tablets) ----------
   Kept at the end of the file on purpose: several base rules above
   (.formtable .label, .pf-cols, .infotable .label, .colorgrid,
   .customslot input, .msg-input, .datatable td, .btn) are unconditional
   and appear later than an earlier draft of this block, so they won
   equal-specificity cascade ties. Placing this last guarantees these
   overrides always win under the breakpoint. */
@media (max-width: 700px) {
  /* Page layout: stack sidebar above content instead of side-by-side.
     Sidebar (search + nav) stays first — it's the fastest path to the
     connecting/messaging flows, so don't reorder it below content. */
  /* align-items: flex-start (base rule) top-aligns sidebar/content in row
     mode; in column mode that same property controls the cross axis
     (width) and means "shrink-to-fit" instead of "stretch" — without this
     override, #content sizes to its widest child (e.g. a table) and
     overflows the viewport instead of being constrained to it. */
  #page { flex-direction: column; align-items: stretch; }
  #sidebar { width: auto; }

  /* Profile two-column layout: force the same collapse the "one column"
     theme choice already gets, regardless of what the profile owner picked. */
  .pf-cols { display: block; }
  .pf-side { width: auto; }

  /* Touch targets */
  .btn, .linkbtn { font-size: 13px; }
  .btn { padding: 8px 14px; }
  .linkbtn { padding: 6px 4px; }
  .header-nav a, .linklike { padding: 8px 10px; }
  .navlist li a { padding: 8px 6px; }
  .searchbox input { padding: 7px; }
  .msg-input { padding: 8px; }

  /* Suppress iOS Safari's zoom-on-focus (triggers under 16px) across every
     text input/textarea, not just the highest-traffic ones. */
  input[type="text"], input[type="password"], textarea, .msg-input, .searchbox input {
    font-size: 16px;
  }

  /* formtable / infotable: always label+value pairs, so stacking is lossless */
  .formtable, .formtable tbody, .formtable tr, .formtable td,
  .infotable, .infotable tbody, .infotable tr, .infotable td {
    display: block;
    width: 100%;
  }
  .formtable .label, .infotable .label {
    text-align: left;
    width: auto;
    padding-top: 8px;
  }
  .formtable input[type="text"],
  .formtable input[type="password"] {
    width: 100%;
    max-width: 100%;
  }
  /* textarea cols="N" sets an intrinsic width that ignores container
     sizing — override for every textarea, not just formtable's. */
  textarea {
    width: 100%;
    max-width: 100%;
  }

  /* datatable: rows have a paired action/timestamp column, so flex the row
     instead of stacking every cell — keeps the two columns associated. */
  .datatable thead, .datatable th { display: none; }
  .datatable tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 0;
  }
  .datatable td {
    display: block;
    border-bottom: none;
    padding: 0;
  }
  .datatable td:first-child { flex: 1 1 auto; min-width: 0; }
  .datatable td:last-child { flex: 0 0 auto; }
  .datatable code { word-break: break-all; }

  /* Fixed-width fields elsewhere on the page */
  .customslot input[type="text"] { width: 100%; }
  .colorgrid { max-width: 100%; grid-template-columns: 1fr; }
}