.portal { --portal-muted: #5e5650; --portal-border: #ded7cd; background: #f6f4f0; }
.portal-bar { background: #fff; border-bottom: 1px solid var(--portal-border); }
.portal-bar .wrap, .portal-bar-actions, .portal-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.portal-bar .wrap { min-height: 76px; padding-block: .25rem; }
.portal-bar .brand { transform: scale(.82); transform-origin: left center; margin-right: -2.5rem; }
.portal-help { color: var(--accent); font-size: .86rem; font-weight: 750; }
.portal-help:hover { text-decoration: underline; }
.portal main { padding-block: clamp(1.5rem, 5vw, 4rem); }
.portal .eyebrow { font-size: .7rem; letter-spacing: .12em; }
.portal-heading { margin-bottom: 1.65rem; }
.portal-heading h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); margin-block: .32rem .55rem; }
.portal-heading > p:last-child { color: var(--portal-muted); }
.portal-panel { background: #fff; border: 1px solid var(--portal-border); border-radius: .8rem; padding: clamp(1rem, 2.6vw, 1.65rem); margin-bottom: 1rem; }
.portal-login { max-width: 1090px; margin-inline: auto; overflow: hidden; border-radius: 1.1rem; background: #fff; box-shadow: 0 12px 42px #35231114; border: 1px solid var(--portal-border); }
.portal-intro {
  min-height: 440px; display: flex; flex-direction: column; justify-content: end; align-items: start;
  padding: clamp(1.65rem, 5vw, 3.35rem); color: #fff;
  background: linear-gradient(0deg, #1c1512f2, #251b12b3 55%, #2d1b0e18), url('/assets/hero.webp') center / cover;
}
.portal-intro .eyebrow { color: #ffba89; }
.portal-intro h1 { font-size: clamp(2.8rem, 6.5vw, 5.5rem); margin-block: .55rem .8rem; }
.portal-intro p:last-child { max-width: 33ch; color: #f2e8df; }
.portal .portal-login-form {
  flex: 1 1 28rem; max-width: 37rem; margin-left: auto; align-items: end; gap: .45rem .65rem; padding-block: .55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}
.portal .portal-login-form[data-mode="signup"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-login-form[data-mode="signup"] #login-submit { grid-column: 1 / -1; }
.portal-login-form:is([data-mode="reset"], [data-mode="recovery"]) { grid-template-columns: minmax(0, 1fr) auto; }
.portal-login-form :is(h2, #auth-hint, .portal-auth-links) { grid-column: 1 / -1; }
.portal-login-form .portal-auth-links { justify-content: flex-end; gap: .25rem 1rem; }
.portal-login-form .text-link { font-size: .8rem; }
.portal .portal-login-form input { min-height: 40px; }
.portal .portal-login-form #login-submit { min-height: 40px; padding: .5rem .75rem; white-space: nowrap; }
@media (max-width: 850px) {
  .portal .portal-login-form { flex: 1 1 100%; max-width: none; order: 1; border-top: 1px solid var(--portal-border); }
}
@media (max-width: 480px) {
  .portal .portal-login-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal .portal-login-form #login-submit { grid-column: 1 / -1; }
  .portal .portal-login-form .portal-auth-links { justify-content: space-between; }
}
.portal h2 { font-size: clamp(1.4rem, 3.8vw, 2rem); margin-bottom: .5rem; }
.portal-login-form h2 { font-size: 1.15rem; margin-bottom: 0; }
#auth-hint { color: var(--portal-muted); margin-bottom: .25rem; }
#login-submit { width: 100%; }
.portal form { display: grid; align-items: start; gap: .8rem; }
.portal form + form { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--portal-border); }
.portal form .button { justify-self: start; }
.portal label { display: grid; min-width: 0; gap: .3rem; font-size: .86rem; font-weight: 700; }
.portal :is(input, select) { min-width: 0; width: 100%; min-height: 44px; padding: .55rem .65rem; border: 1px solid #a99c90; border-radius: .42rem; color: var(--ink); background: #fff; font: inherit; font-weight: 500; }
.portal .text-link { background: none; border: 0; padding: .25rem 0; cursor: pointer; }
.portal .button { border-radius: .42rem; }
.portal .button.outline { background: #fff; }
.portal .button.outline:hover { background: #f9f2ea; }
.portal-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.portal summary { font-weight: 800; cursor: pointer; }
.portal details[open] > summary { margin-bottom: 1.25rem; }
#message { background: #fff; border: 1px solid var(--portal-border); border-left: 4px solid var(--orange); border-radius: .45rem; padding: .8rem 1rem; margin-bottom: 1rem; }
.portal-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .85rem; margin-bottom: 1.15rem; }
.portal-toolbar label { flex: 1 1 14rem; max-width: 24rem; }
.portal-company { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .85rem; padding: 1.25rem 0 1rem; border-top: 1px solid var(--portal-border); }
.portal-company h2 { overflow-wrap: anywhere; margin-block: .4rem .32rem; }
.portal-company #company-details { color: var(--portal-muted); overflow-wrap: anywhere; }
.portal-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.15rem; }
.portal-metric { display: grid; justify-items: start; gap: .2rem; text-align: left; padding: .9rem 1rem; border-radius: .65rem; border: 1px solid var(--portal-border); color: var(--ink); background: #fff; cursor: pointer; }
.portal-metric:hover { border-color: var(--accent); background: #fffaf4; }
.portal-metric strong { font-size: clamp(1.6rem, 3.5vw, 2.45rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.portal-metric span { color: var(--portal-muted); font-size: .84rem; font-weight: 700; }
.portal-document-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: .85rem; }
.portal-document-heading h2 { margin: .4rem 0 0; }
#document-count { color: var(--portal-muted); font-size: .85rem; }
.portal-segments { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--portal-border); margin-bottom: .95rem; padding-bottom: .6rem; }
.portal-segments button { border: 1px solid transparent; border-radius: .4rem; background: transparent; color: var(--portal-muted); font-size: .86rem; font-weight: 750; padding: .43rem .65rem; cursor: pointer; }
.portal-segments button:hover { background: #fbf3eb; }
.portal-segments button[aria-pressed="true"] { color: #86330f; border-color: #f1c8ae; background: #fff1e4; }
.portal-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, .38fr); gap: .75rem; margin-bottom: 1rem; }
.portal-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.portal-list > li { border-top: 1px solid var(--portal-border); padding-top: .75rem; overflow-wrap: anywhere; }
.portal-list > li > .portal-actions { justify-content: start; margin-top: .4rem; }
.portal-doc-list { list-style: none; padding: 0; margin: 0; }
.portal-doc-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .55rem 1rem; padding: .95rem 0; border-top: 1px solid var(--portal-border); }
.portal-doc-title { display: flex; flex-wrap: wrap; align-items: center; gap: .42rem .6rem; overflow-wrap: anywhere; }
.portal-doc-title strong { font-size: 1rem; }
.portal-doc-type { color: var(--portal-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.portal-doc-info p, .portal-related-invoices { margin-top: .3rem; color: var(--portal-muted); font-size: .86rem; }
.portal-related-invoices { margin-bottom: 0; padding-left: 1.1rem; }
.portal-status { display: inline-block; padding: .14rem .52rem; border-radius: 999px; background: #f0ede8; color: #54483b; font-size: .73rem; font-weight: 800; }
.portal-status.reglee, .portal-status.accepte { background: #e1f3e9; color: #226044; }
.portal-status.ouvert { background: #e7effb; color: #284a76; }
.portal-status.a_payer, .portal-status.envoye { background: #fff0d8; color: #764707; }
.portal-status.en_retard, .portal-status.expire, .portal-status.refuse { background: #fbe6e0; color: #8d301f; }
.portal-doc-options { grid-column: 1 / -1; color: var(--portal-muted); font-size: .86rem; }
.portal-doc-options .portal-actions { justify-content: start; align-items: end; }
.portal-doc-options label { flex: 1 1 10rem; max-width: 16rem; }
.portal-empty { text-align: center; padding: 1.6rem 1rem; background: #f8f6f3; border: 1px dashed #d1c7ba; border-radius: .6rem; color: var(--portal-muted); }
.portal-workspace-nav { margin-bottom: 1.2rem; }
.portal-favorite-list > li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .55rem; }
.portal .portal-favorite-choice { display: flex; align-items: center; gap: .65rem; }
.portal-favorite-choice input { width: 20px; min-height: 20px; accent-color: #963b22; }
#favorite-actions { margin-top: 1rem; }
#favorite-empty { margin-top: 1rem; }
@media (max-width: 760px) {
  .portal-intro { min-height: 235px; }
  .portal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .portal-bar-actions { justify-content: end; gap: .4rem; }
  .portal-bar-actions:has(#account-profile:not([hidden])) .portal-help { display: none; }
  .portal-filters, .portal-doc-list > li { grid-template-columns: minmax(0, 1fr); }
  .portal-doc-list > li > .button { justify-self: start; }
}

.portal-profile { position: relative; }
#profile-name { max-width: min(24vw, 13rem); overflow: hidden; text-overflow: ellipsis; }
.portal-profile-caret {
  width: .42rem; height: .42rem; margin: -.15rem .1rem 0 .1rem;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.portal .portal-profile-panel .portal-logout { color: #8b301f; border-color: #d5a597; }
.portal-profile > summary {
  display: flex; align-items: center; gap: .5rem; list-style: none;
  border: 1px solid var(--portal-border); border-radius: 2rem; padding: .3rem .75rem .3rem .3rem;
  color: var(--ink); font-size: .88rem; white-space: nowrap;
}
.portal-profile[open] > summary { margin-bottom: 0; border-color: var(--accent); }
.portal-profile > summary::-webkit-details-marker { display: none; }
.portal-avatar {
  display: grid; place-items: center; width: 2rem; height: 2rem; overflow: hidden;
  border-radius: 50%; background: #ffe5d0; color: #86330f;
}
.portal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-profile-panel {
  position: absolute; top: calc(100% + .45rem); right: 0; z-index: 5;
  width: min(16rem, calc(100vw - 2rem)); display: grid; gap: .55rem; padding: .9rem;
  border: 1px solid var(--portal-border); border-radius: .65rem; background: #fff;
  box-shadow: 0 .6rem 1.8rem #35231126; overflow-wrap: anywhere;
}
#profile-message { color: var(--portal-muted); font-size: .83rem; }
#profile-message:empty { display: none; }
.portal-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.portal .portal-doc-actions .button { min-height: 2.5rem; padding: .5rem .7rem; font-size: .82rem; }
.portal .portal-quote-accept { background: #245941; border: 1px solid #245941; color: #fff; }
.portal .portal-quote-accept:hover { background: #18432f; }
.portal-reader {
  width: min(56rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); padding: 0;
  border: 1px solid var(--portal-border); border-radius: .7rem; background: #fff; color: var(--ink);
}
.portal-reader[open] { display: flex; flex-direction: column; }
.portal-reader::backdrop { background: #201914ba; }
.portal-reader-heading, .portal-reader-nav {
  padding: .65rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.portal-reader-heading h2 { margin: 0; overflow-wrap: anywhere; }
.portal-reader-nav { justify-content: center; flex-wrap: wrap; }
.portal-reader-body { padding: .75rem; overflow: auto; background: #eeeae4; }
.portal-reader-body p { text-align: center; }
.portal-reader-body canvas { display: block; max-width: 100%; height: auto; margin-inline: auto; background: #fff; }

.portal-company-dialog {
  width: min(37rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem);
  padding: clamp(1rem, 4vw, 1.6rem); color: var(--ink); background: #fff;
  border: 1px solid var(--portal-border); border-radius: .7rem;
}
.portal-company-dialog::backdrop { background: #201914ba; }
.portal-company-dialog h2 { margin-bottom: 0; }
.portal-company-dialog .portal-actions { justify-content: flex-start; }
#self-company-message { color: #8b301f; }

.portal-company-identity { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.portal-company-logo {
  display: grid; place-items: center; width: 4rem; height: 4rem; flex: 0 0 auto; overflow: hidden;
  background: #ffead8; border: 1px solid var(--portal-border); border-radius: .75rem;
  color: #86330f; font-size: 1.15rem; font-weight: 850;
}
.portal-company-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.portal-company-logo-actions { justify-content: flex-start; margin-bottom: 1.1rem; }
#company-logo-message { color: var(--portal-muted); font-size: .85rem; }
.portal-company-delete {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  border-color: #e7bbb4; background: #fff8f6;
}
.portal-company-delete h2 { font-size: 1.15rem; color: #8d2722; }
.portal-company-delete p { color: var(--portal-muted); max-width: 65ch; }
.portal .portal-danger { background: #a12b24; border-color: #a12b24; color: #fff; }
.portal .portal-danger:hover { background: #7e201a; border-color: #7e201a; }

.admin-workspace { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.portal-workspace-content { min-width: 0; }
.admin-sidebar {
  position: sticky; top: 1rem; display: grid; gap: .2rem; padding: .7rem;
  background: #231d19; color: #f6eee7; border-radius: .75rem;
}
.admin-sidebar p { padding: .65rem .65rem .2rem; color: #e2b79f; font-size: .67rem; font-weight: 800; letter-spacing: .11em; }
.admin-sidebar button {
  text-align: left; padding: .62rem .7rem; border: 1px solid transparent; border-radius: .4rem;
  color: inherit; background: transparent; font: inherit; font-weight: 730; cursor: pointer;
}
.admin-sidebar button:hover { background: #3b3029; }
.admin-sidebar button[aria-current="page"] { border-color: #b97a59; background: #583725; color: #fff; }
.admin-workspace .portal-heading h1 { font-size: clamp(2.15rem, 5vw, 3.5rem); }
.admin-pending { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.admin-pending > section, #admin-directory { min-width: 0; }
.admin-pending h2, #admin-directory h2 { font-size: 1.25rem; }
.admin-table-wrap { overflow-x: auto; margin-block: .55rem .8rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; text-align: left; }
.admin-table th { color: var(--portal-muted); font-size: .75rem; font-weight: 800; }
.admin-table :is(th,td) { padding: .6rem .5rem; border-bottom: 1px solid var(--portal-border); vertical-align: middle; }
.admin-table button { text-align: left; }
.admin-table select { width: auto; min-width: 6.5rem; }
.admin-directory-heading, .admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.portal #admin-list-filter { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; margin: .5rem 0; }
.portal #admin-pending-filter { display: flex; align-items: center; gap: .4rem; padding-block: .45rem; }
#admin-pending-filter input { width: 1rem; min-height: 1rem; accent-color: #963b22; }
#admin-list-filter:has(#admin-pending-filter[hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
#admin-list-message, #admin-page { color: var(--portal-muted); }
.admin-count-note { color: var(--portal-muted); font-size: .74rem; line-height: 1.4; }
@media (max-width: 960px) {
  .admin-pending { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .admin-workspace { grid-template-columns: minmax(0, 1fr); }
  .admin-sidebar { position: static; display: flex; flex-wrap: wrap; gap: .25rem; }
  .admin-sidebar p { display: none; }
  .admin-sidebar button { padding: .45rem .55rem; }
  .portal #admin-list-filter { display: flex; align-items: end; flex-wrap: wrap; }
  #admin-list-filter label:first-child { flex: 1 1 100%; }
}

#admin-return-directory { margin-bottom: 1rem; }
#admin-list td { overflow-wrap: anywhere; }
.portal-amount-message { color: var(--portal-muted); font-size: .85rem; }
.portal-document-total { display: grid; gap: .65rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--portal-border); }
.portal-document-total .portal-actions { justify-content: flex-start; }

.portal-sales-editor {
  width: min(74rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem);
  padding: clamp(1rem, 3vw, 1.7rem); border: 1px solid var(--portal-border);
  border-radius: .8rem; background: #fff; color: var(--ink);
}
.portal-sales-editor::backdrop { background: #201914ba; }
.sales-editor-header { display: flex; justify-content: space-between; align-items: start; gap: .8rem; margin-bottom: .8rem; }
.sales-editor-header h2 { margin-top: .3rem; }
.portal .portal-sales-editor form { gap: 1rem; }
.portal .portal-sales-editor textarea {
  padding: .5rem .65rem; border: 1px solid #a99c90; border-radius: .42rem;
  background: #fff; color: var(--ink); font: inherit; resize: vertical; min-width: 0;
}
.sales-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.portal-sales-editor fieldset { display: grid; gap: .6rem; padding: .75rem; border: 1px solid var(--portal-border); border-radius: .5rem; min-width: 0; }
.portal-sales-editor legend { font-size: .9rem; font-weight: 800; padding-inline: .35rem; }
.sales-catalogue { display: flex; flex-wrap: wrap; align-items: end; gap: .55rem; margin: .6rem 0; }
.sales-catalogue label { flex: 1 1 15rem; }
.sales-line {
  display: grid; grid-template-columns: minmax(6rem, .9fr) minmax(10rem, 2.4fr) repeat(4, minmax(4.3rem, .75fr)) auto;
  gap: .45rem; align-items: end; padding-block: .55rem; border-bottom: 1px solid var(--portal-border);
}
.sales-line label { font-size: .78rem; }
.sales-line .button { padding: .5rem .6rem; }
.sales-line-actions, .sales-submit { justify-content: flex-start; margin-top: .65rem; }
.sales-totals { margin-left: auto; width: min(19rem, 100%); display: grid; gap: .3rem; background: #fff4e9; padding: .75rem; border-radius: .5rem; }
.sales-totals > div { display: flex; justify-content: space-between; gap: .5rem; }
.sales-totals > div:last-child { font-weight: 850; border-top: 1px solid #ead3bf; padding-top: .35rem; }
.sales-message { padding: .65rem .8rem; border-radius: .4rem; background: #fff4e9; color: #67361f; }
@media(max-width: 800px) {
  .sales-line { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sales-line label:nth-child(2) { grid-column: span 3; }
}
@media(max-width: 550px) {
  .sales-addresses { grid-template-columns: minmax(0, 1fr); }
  .sales-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-line label:nth-child(2) { grid-column: auto; }
}