/* ============================================================
   Foody — Customer Portal styling (design reference: account.html)
   Loaded via inherited view: website.foody_header_style -> website.layout
   Style-ONLY: targets Odoo's native portal DOM (portal.portal_layout
   #487 + side_content / my_home / my_details / table). No markup or
   logic changes.

   Scope: everything is prefixed with `#wrap.o_portal_wrap` (portal
   pages only) or `.o_portal` (the breadcrumb strip, which sits
   outside #wrap). The id-qualified prefix (#wrap.o_portal_wrap)
   also out-specifies the shared `#wrap .card`/`.form` rules from
   foody_home.css so portal cards/forms get the portal treatment.

   Design tokens (--green, --mint, --cream, --line, --ink, --rose,
   --r-md …) + the DM Sans / Manrope / Unbounded fonts are already
   declared globally by foody_header.css / foody_home.css.
   ============================================================ */

/* ---------- Page canvas ---------- */
/* Fill the space between header and footer so the cream background
   covers the whole viewport area, not just up to where the content
   ends. min-height is used (instead of flexing <main>) so it can't
   disturb the rest of the portal layout or any other page. */
#wrap.o_portal_wrap {
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  min-height: 72vh;
}

#wrap.o_portal_wrap h1,
#wrap.o_portal_wrap h2,
#wrap.o_portal_wrap h3,
#wrap.o_portal_wrap h4,
#wrap.o_portal_wrap h5 {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* "My account" title row */
#wrap.o_portal_wrap .wrapper h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin-block: 1.2rem;
}

#wrap.o_portal_wrap .o_portal_content h1,
#wrap.o_portal_wrap .o_portal_content h2,
#wrap.o_portal_wrap .o_portal_content h3 {
  font-size: 1.35rem;
}

/* Mobile avatar toggle button */
#wrap.o_portal_wrap .o_avatar {
  border: 2px solid var(--line);
}

/* ---------- Breadcrumb strip (sits outside #wrap) ---------- */
.o_portal.container .breadcrumb,
.o_portal_submenu.breadcrumb {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .82rem;
  font-weight: 600;
}

.o_portal .breadcrumb-item a,
.o_portal .breadcrumb-item i {
  color: var(--green);
}

.o_portal .breadcrumb-item.active,
.o_portal .breadcrumb-item:last-child {
  color: var(--muted);
}

/* ---------- Cards (home docs entries + generic panels) ---------- */
#wrap.o_portal_wrap .card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#wrap.o_portal_wrap a.card:hover,
#wrap.o_portal_wrap .card.o_portal_doc_entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--green);
}

#wrap.o_portal_wrap .card-body {
  padding: 1.4rem;
}

/* Docs-entry icon tile */
#wrap.o_portal_wrap .o_portal_docs .card .fa,
#wrap.o_portal_wrap .o_portal_docs .card img {
  color: var(--green);
}

/* ---------- Side content (account nav / contact panel) ---------- */
#wrap.o_portal_wrap .col-lg-4 > .mt-3,
#wrap.o_portal_wrap .offcanvas-body {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.6rem;
}

#wrap.o_portal_wrap .col-lg-4 .o_avatar,
#wrap.o_portal_wrap .col-lg-4 img.rounded,
#wrap.o_portal_wrap .offcanvas-body img.rounded {
  border-radius: 14px !important;
  border: 1px solid var(--line);
}

#wrap.o_portal_wrap .o_portal_my_details {
  font-size: .9rem;
  color: var(--muted);
}

#wrap.o_portal_wrap .o_portal_my_details address {
  margin-bottom: 0;
}

/* "Edit information" link → green action */
#wrap.o_portal_wrap .btn-link {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

#wrap.o_portal_wrap .btn-link:hover {
  color: var(--green-deep);
  text-decoration: underline;
}

/* ---------- Tables (orders / documents lists) ---------- */
#wrap.o_portal_wrap .o_portal_my_doc_table,
#wrap.o_portal_wrap .table {
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}

#wrap.o_portal_wrap .table > thead th {
  background: var(--mint);
  color: var(--green-deep);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  padding: .85rem 1rem;
}

/* Kill the striped grey; use clean row separators like design .order-line */
#wrap.o_portal_wrap .table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: transparent;
}

#wrap.o_portal_wrap .table > tbody > tr {
  border-bottom: 1px solid var(--line);
}

#wrap.o_portal_wrap .table > tbody > tr:last-child {
  border-bottom: none;
}

#wrap.o_portal_wrap .table > tbody td {
  padding: .95rem 1rem;
  vertical-align: middle;
  border: none;
  font-size: .9rem;
}

#wrap.o_portal_wrap .table > tbody > tr:hover > * {
  background: rgba(233, 243, 230, .45);   /* --mint @ ~45% */
}

/* ---------- Status pills (design .pill-status) ---------- */
#wrap.o_portal_wrap .badge {
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Neutral / info states → mint+green */
#wrap.o_portal_wrap .badge.bg-info,
#wrap.o_portal_wrap .badge.text-bg-info,
#wrap.o_portal_wrap .badge.bg-secondary,
#wrap.o_portal_wrap .badge.text-bg-secondary,
#wrap.o_portal_wrap .badge.bg-primary,
#wrap.o_portal_wrap .badge.text-bg-primary {
  background: var(--mint) !important;
  color: var(--green) !important;
}

/* Success → solid green */
#wrap.o_portal_wrap .badge.bg-success,
#wrap.o_portal_wrap .badge.text-bg-success {
  background: var(--green) !important;
  color: #fff !important;
}

/* Warning / muted → soft pink */
#wrap.o_portal_wrap .badge.bg-warning,
#wrap.o_portal_wrap .badge.text-bg-warning,
#wrap.o_portal_wrap .badge.bg-light,
#wrap.o_portal_wrap .badge.text-bg-light {
  background: var(--pink-soft) !important;
  color: var(--rose-deep) !important;
}

/* ---------- Buttons ---------- */
#wrap.o_portal_wrap .btn {
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#wrap.o_portal_wrap .btn:not(.btn-link):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

#wrap.o_portal_wrap .btn-primary,
#wrap.o_portal_wrap .btn-primary:focus {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

#wrap.o_portal_wrap .btn-primary:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
}

#wrap.o_portal_wrap .btn-secondary,
#wrap.o_portal_wrap .btn-light {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--green);
}

#wrap.o_portal_wrap .btn-secondary:hover,
#wrap.o_portal_wrap .btn-light:hover {
  background: var(--mint-deep);
  border-color: var(--mint-deep);
  color: var(--green-deep);
}

#wrap.o_portal_wrap .btn-outline-primary,
#wrap.o_portal_wrap .btn-outline-secondary {
  color: var(--green);
  border: 1.6px solid var(--green);
  background: transparent;
}

#wrap.o_portal_wrap .btn-outline-primary:hover,
#wrap.o_portal_wrap .btn-outline-secondary:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

#wrap.o_portal_wrap .btn-danger {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

#wrap.o_portal_wrap .btn-danger:hover {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
}

/* ---------- Forms (address / details / security) ---------- */
#wrap.o_portal_wrap label,
#wrap.o_portal_wrap .col-form-label,
#wrap.o_portal_wrap .o_wrap_input label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

#wrap.o_portal_wrap .form-control,
#wrap.o_portal_wrap .form-select {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: .7rem 1rem;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

#wrap.o_portal_wrap .form-control:focus,
#wrap.o_portal_wrap .form-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(36, 92, 51, .12);
}

#wrap.o_portal_wrap .form-control::placeholder {
  color: var(--muted);
  opacity: .7;
}

/* ---------- Pager ---------- */
#wrap.o_portal_wrap .pagination .page-link {
  color: var(--green);
  border-color: var(--line);
}

#wrap.o_portal_wrap .pagination .page-item.active .page-link {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* ---------- Alerts / empty states ---------- */
#wrap.o_portal_wrap .alert-info {
  background: var(--mint);
  border-color: var(--mint-deep);
  color: var(--green-deep);
  border-radius: var(--r-md);
}

#wrap.o_portal_wrap .o_portal_doc_spinner {
  color: var(--green) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  #wrap.o_portal_wrap .col-lg-4 > .mt-3 {
    margin-top: 1.2rem;
  }
}