/* Odoo redesign: the "Share link" dialog (index.html, #shareModal). Uses the tokens from odoo-tokens.css and the dialog shell from odoo-dialogs.css.
   Every rule starts with .o-modal so it beats the old utilities without !important. Linked after odoo-dialogs.css. */

/* the note and the warnings: Odoo alert (radius 6, *-subtle colours) */
.o-modal .o-share-note, .o-modal .o-share-warn, .o-modal .o-share-ok {
  padding: 8px 12px; border: 1px solid transparent; border-radius: var(--odoo-radius);
  font-size: var(--odoo-fs-small); line-height: 1.5;
}
.o-modal .o-share-note { background: var(--odoo-info-bg-subtle); border-color: var(--odoo-info-bg-subtle); color: var(--odoo-info-text); }
.o-modal .o-share-warn { background: var(--odoo-warning-bg-subtle); border-color: var(--odoo-warning-bg-subtle); color: var(--odoo-warning-alert-text); }
.o-modal .o-share-ok { display: flex; align-items: center; gap: 6px; background: var(--odoo-success-bg-subtle); border-color: var(--odoo-success-bg-subtle); color: var(--odoo-success-alert-text); font-size: var(--odoo-fs-base); }

/* the link field and its buttons */
.o-modal .o-share-link { font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.o-modal .o-share-btns { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.o-modal .o-share-btns > button { display: inline-flex; align-items: center; gap: 5px; }

/* the list of links made so far */
.o-modal .o-share-rows { border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); overflow: hidden; }
.o-modal .o-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; background: #fff; }
.o-modal .o-share-row + .o-share-row { border-top: 1px solid var(--odoo-border-color); }
.o-modal .o-share-row[data-state="off"], .o-modal .o-share-row[data-state="expired"] { background: var(--odoo-gray-100); }
.o-modal .o-share-main { flex: 1 1 200px; min-width: 0; }
.o-modal .o-share-t { font-size: var(--odoo-fs-base); font-weight: 500; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-modal .o-share-s { font-size: var(--odoo-fs-small); color: var(--odoo-secondary-color); }
.o-modal .o-share-st { flex: 0 0 auto; padding: 0 8px; border-radius: 99px; font-size: 12px; line-height: 20px; font-weight: 500; background: var(--odoo-secondary-bg-subtle); color: var(--odoo-gray-700); }
.o-modal .o-share-st[data-st="on"] { background: var(--odoo-success-bg-subtle); color: var(--odoo-success-alert-text); }
.o-modal .o-share-act { flex: 0 0 auto; display: flex; gap: 6px; }

.o-modal .o-share-ask { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--odoo-radius); background: var(--odoo-danger-bg-subtle); border: 1px solid var(--odoo-danger-bg-subtle); font-size: var(--odoo-fs-small); color: var(--odoo-danger-alert-text); }
.o-modal .o-share-ask > span { flex: 1 1 220px; }

@media (max-width: 575.98px) {
  .o-modal .o-share-act { flex: 1 1 100%; }
  .o-modal .o-share-act > button { flex: 1 1 0; justify-content: center; }
}