/*
 * UCP Client Portal — Phase 3 (Task detail)
 *
 * Keep styles scoped under #ucp-admin-app so we can reuse the admin skin.
 */

/*
 * UX: On the portal page, do not show the native WordPress admin bar.
 * We render our own (ucp-topbar) to keep the experience consistent.
 */
body.ucp-client-portal #wpadminbar{ display:none !important; }
html body.ucp-client-portal{ margin-top:0 !important; }
body.ucp-client-portal #ucp-admin-app{ padding-top: 56px; }

/* ------------------------------------------------------------------
 * Help Centre (Client Portal)
 * ------------------------------------------------------------------ */

#ucp-admin-app .ucp-help-page{
  padding: var(--ucp-help-page-pad);
}

#ucp-admin-app .ucp-help-list{
  display:block;
}

#ucp-admin-app .ucp-help-index{
  list-style: none;
  margin: 0;
  padding: 0;
}

#ucp-admin-app .ucp-help-index-item{
  margin: 0;
  padding: 6px 0;
}

#ucp-admin-app .ucp-help-index-link{
  display:inline-block;
  color: var(--ucp-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

#ucp-admin-app .ucp-help-index-link:hover{
  text-decoration: underline;
  background: transparent;
}

#ucp-admin-app .ucp-help-index-excerpt{
  margin-top: 2px;
  font-size: 13px;
  color: var(--ucp-muted);
}

#ucp-admin-app .ucp-help-index-item > .ucp-help-index{
  margin-top: 6px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--ucp-border);
}


/* ------------------------------------------------------------------
 * Portal isolation — reduce theme influence on tables/typography
 * ------------------------------------------------------------------ */
body.ucp-client-portal #ucp-admin-app table.ucp-table{
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
body.ucp-client-portal #ucp-admin-app table.ucp-table th,
body.ucp-client-portal #ucp-admin-app table.ucp-table td{
  border: 0 !important;
  border-bottom: 1px solid var(--ucp-border) !important;
  padding: var(--ucp-table-cell-pad) !important;
  text-align: left !important;
  vertical-align: top !important;
  background: transparent !important;
}
body.ucp-client-portal #ucp-admin-app table.ucp-table th{
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--ucp-muted) !important;
  font-weight: 800 !important;
}
body.ucp-client-portal #ucp-admin-app table.ucp-table a{
  color: var(--ucp-primary) !important;
  text-decoration: none !important;
}
body.ucp-client-portal #ucp-admin-app table.ucp-table a:hover{
  text-decoration: underline !important;
}

/* Help Centre: On this page box */
#ucp-admin-app .ucp-help-toc{
  margin: 12px 0;
  padding: calc(var(--ucp-sidebox-pad) + 2px) calc(var(--ucp-sidebox-pad) + 4px);
  border: 1px solid var(--ucp-border);
  border-radius: 12px;
  background: var(--ucp-surface-2);
  box-shadow: none;
}
#ucp-admin-app .ucp-help-toc a{
  color: var(--ucp-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
#ucp-admin-app .ucp-help-toc a:hover{
  text-decoration: underline;
}

/* Login / Auth screen */
#ucp-admin-app.ucp-auth{
  --ucp-brand: #5b89b4;
  --ucp-accent: #E69E6C;
  position: relative;

  /* Full-bleed (escape theme container) */
  width: 100vw;
  max-width: none;
  min-height: 100vh;

  /* Break out of centered content containers (e.g. Elementor/Theme wrappers) */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  padding: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
}


#ucp-admin-app.ucp-auth .ucp-auth__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

#ucp-admin-app.ucp-auth .ucp-auth__overlay{
  position: absolute;
  inset: 0;
  /* Solid overlay (no blur) for a sharper hero background */
  background: rgba(26, 66, 138, .88); /* #1a428a */
}

#ucp-admin-app.ucp-auth .ucp-auth__wrap{
  position: relative;
  width: min(980px, 100%);
  display: grid;
  justify-items: center;
}

#ucp-admin-app.ucp-auth .ucp-auth__card{
  width: min(460px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
  padding: 22px;
}

#ucp-admin-app.ucp-auth .ucp-auth__brand{
  display:flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

#ucp-admin-app.ucp-auth .ucp-auth__mark{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--ucp-brand);
  box-shadow: 0 10px 20px rgba(26,66,138,.18);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight: 800;
  letter-spacing: -0.02em;
}


#ucp-admin-app.ucp-auth .ucp-auth__markimg{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:block;
  object-fit: cover;
}

#ucp-admin-app.ucp-auth .ucp-auth__title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: #0f172a;
}

#ucp-admin-app.ucp-auth .ucp-auth__sub{
  margin: 3px 0 0;
  font-size: 13px;
  color: #334155;
}

#ucp-admin-app.ucp-auth form{
  margin-top: 12px;
}

#ucp-admin-app.ucp-auth form p{
  margin: 0 0 12px;
  display:block;
}

#ucp-admin-app.ucp-auth label{
  display:block;
  margin: 0 0 6px;
  font-weight: 600;
  color: #0f172a;
}

#ucp-admin-app.ucp-auth input[type="text"],
#ucp-admin-app.ucp-auth input[type="password"]{
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  padding: 10px 12px;
  font-size: 14px;
}

#ucp-admin-app.ucp-auth input[type="text"]:focus,
#ucp-admin-app.ucp-auth input[type="password"]:focus{
  border-color: rgba(91,137,180,.7);
  box-shadow: 0 0 0 3px rgba(91,137,180,.18);
  outline: none;
}

#ucp-admin-app.ucp-auth .forgetmenot{
  margin-top: 6px;
}

#ucp-admin-app.ucp-auth .forgetmenot label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin: 0;
  font-weight: 500;
  color: #334155;
}

#ucp-admin-app.ucp-auth #wp-submit{
  width: 100%;
  margin-top: 10px;
  border-radius: 14px;
  border: 0;
  padding: 10px 14px;
  background: var(--ucp-accent);
  color: #ffffff;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 10px 20px rgba(230,158,108,.35);
}

#ucp-admin-app.ucp-auth #wp-submit:hover{
  filter: brightness(0.98);
}

#ucp-admin-app.ucp-auth a{
  color: var(--ucp-accent);
  text-decoration: none;
}

#ucp-admin-app.ucp-auth a:hover{
  text-decoration: underline;
}


/* Branded auth (custom form) */
#ucp-admin-app.ucp-auth .ucp-auth__form{ margin-top: 12px; }
#ucp-admin-app.ucp-auth .ucp-auth__field{ margin: 0 0 12px; }
#ucp-admin-app.ucp-auth .ucp-auth__label{
  display:block;
  margin: 0 0 6px;
  font-weight: 600;
  color: #0f172a;
}
#ucp-admin-app.ucp-auth .ucp-auth__input{
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  padding: 10px 12px;
  font-size: 14px;
}
#ucp-admin-app.ucp-auth .ucp-auth__input:focus{
  border-color: rgba(91,137,180,.7);
  box-shadow: 0 0 0 3px rgba(91,137,180,.18);
  outline: none;
}

#ucp-admin-app.ucp-auth .ucp-auth__password{
  position: relative;
}
#ucp-admin-app.ucp-auth .ucp-auth__password .ucp-auth__input{
  padding-right: 78px;
}
#ucp-admin-app.ucp-auth .ucp-auth__toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #E69E6C;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 6px;
  line-height: 1;
}
#ucp-admin-app.ucp-auth .ucp-auth__toggle:hover{
  text-decoration: underline;
}
#ucp-admin-app.ucp-auth .ucp-auth__remember{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin: 6px 0 0;
  font-weight: 500;
  color: #334155;
}
#ucp-admin-app.ucp-auth .ucp-auth__btn{
  width: 100%;
  margin-top: 10px;
  border-radius: 14px;
  border: 0;
  padding: 10px 14px;
  background: var(--ucp-accent);
  color: #ffffff;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 10px 20px rgba(230,158,108,.35);
  cursor: pointer;
}
#ucp-admin-app.ucp-auth .ucp-auth__btn:hover{ filter: brightness(0.98); }
#ucp-admin-app.ucp-auth .ucp-auth__link{
  display:inline-block;
  margin-top: 10px;
  color: var(--ucp-accent);
  text-decoration: none;
}
#ucp-admin-app.ucp-auth .ucp-auth__link:hover{ text-decoration: underline; }
#ucp-admin-app.ucp-auth .ucp-auth__alert{
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  margin-top: 10px;
}
#ucp-admin-app.ucp-auth .ucp-auth__alert.is-error{
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
  color: #991b1b;
}
#ucp-admin-app.ucp-auth .ucp-auth__alert.is-success{
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.25);
  color: #166534;
}


@media (max-width: 520px){
  #ucp-admin-app.ucp-auth{ padding: 14px; }
  #ucp-admin-app.ucp-auth .ucp-auth__card{ padding: 18px; border-radius: 16px; }
}

#ucp-admin-app .ucp-client-empty{
  padding: 6px 2px;
}

#ucp-admin-app .ucp-client-title{
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}

#ucp-admin-app .ucp-client-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

/* Status badges (match admin) */
#ucp-admin-app .ucp-status,
#ucp-admin-app .ucp-docstatus{
  display:inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  background: #e5e7eb;
  color: #111827;
  line-height: 1.4;
}

#ucp-admin-app .ucp-status--awaiting_review{ background: #fde68a; }
#ucp-admin-app .ucp-status--needs_fix{ background: #fed7aa; }
#ucp-admin-app .ucp-status--complete{ background: #bbf7d0; }
#ucp-admin-app .ucp-status--overdue{ background: #fca5a5; }

#ucp-admin-app .ucp-docstatus{ font-size: 12px; }
#ucp-admin-app .ucp-docstatus--awaiting{ background: #fde68a; }
#ucp-admin-app .ucp-docstatus--approved{ background: #bbf7d0; }
#ucp-admin-app .ucp-docstatus--needs_fix{ background: #fde68a; }
#ucp-admin-app .ucp-docstatus--rejected{ background: #fecaca; }

/* Table row interaction */
#ucp-admin-app .ucp-client-task-row{
  cursor: pointer;
}
#ucp-admin-app .ucp-client-task-row:hover{
  background: #f6f7f7;
}

/* Detail layout */
#ucp-admin-app .ucp-client-detail__head{
  display:flex;
  flex-direction: column;
  gap:10px;
  align-items:flex-start;
  margin-bottom: 14px;
}

#ucp-admin-app .ucp-client-backlink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ucp-border);
  background: var(--ucp-surface-2);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
#ucp-admin-app .ucp-client-backlink:hover{
  background: var(--ucp-hover);
}


#ucp-admin-app .ucp-client-detail__headMain{
  flex: 1;
  min-width: 0;
}

#ucp-admin-app .ucp-client-detail__title{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 2px;
}

#ucp-admin-app .ucp-client-detail__meta{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top: 8px;
  flex-wrap: wrap;
}

#ucp-admin-app .ucp-client-detail__summary{
  margin: 12px 0 20px;
  padding: 10px 12px;
  background: #f6f7f7;
  border: 1px solid var(--ucp-border);
  border-radius: 10px;
  font-size: 13px;
}

#ucp-admin-app .ucp-client-section{
  padding-top: 12px;
  margin-top: 18px;
  border-top: 1px solid var(--ucp-border);
}

#ucp-admin-app .ucp-client-section__title{
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 12px;
}

/* Docs list */
#ucp-admin-app .ucp-doc-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

#ucp-admin-app .ucp-doc-item{
  border: 1px solid var(--ucp-border);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}

#ucp-admin-app .ucp-doc-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content: space-between;
}

#ucp-admin-app .ucp-doc-main{
  min-width: 0;
}

#ucp-admin-app .ucp-doc-title{
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 4px;
  word-break: break-word;
}

#ucp-admin-app .ucp-doc-meta{
  font-size: 12px;
  display:flex;
  gap: 6px;
  align-items:center;
  flex-wrap: wrap;
}

#ucp-admin-app .ucp-doc-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#ucp-admin-app .ucp-doc-note{
  margin-top: 8px;
  font-size: 12px;
  color: #1d2327;
}

#ucp-admin-app .ucp-doc-note--review{
  border-top: 1px dashed var(--ucp-border);
  padding-top: 8px;
}

/* Doc status chip */
#ucp-admin-app .ucp-chip.ucp-chip--doc{
  font-size: 11px;
  padding: 2px 8px;
}

#ucp-admin-app .ucp-chip[data-doc-status="approved"]{
  background: #e7f7ed;
  border: 1px solid #bfe7cf;
}
#ucp-admin-app .ucp-chip[data-doc-status="awaiting"]{
  background: #fff7e6;
  border: 1px solid #f3d39c;
}
#ucp-admin-app .ucp-chip[data-doc-status="needs_fix"]{
  background: #ffe9e9;
  border: 1px solid #f3b6b6;
}

/* Upload form */
#ucp-admin-app .ucp-upload{
  margin-top: 14px;
  padding: 10px 12px;
  background: #f6f7f7;
  border: 1px solid var(--ucp-border);
  border-radius: 12px;
}

#ucp-admin-app .ucp-upload__row{
  margin-bottom: 10px;
}

#ucp-admin-app .ucp-upload__row:last-child{
  margin-bottom: 0;
}


/* Tabs (match admin UX) */
.ucp-tabs{
  display:flex;
  gap: 18px;
  margin: 0 0 16px 0;
  padding: 0 2px;
  border-bottom: 1px solid var(--ucp-border);
}

.ucp-tab{
  border: none;
  background: transparent;
  padding: 10px 2px;
  margin-bottom: -1px;
  cursor:pointer;
  font: inherit;
  font-weight: 800;
  color: var(--ucp-muted);
  border-bottom: 3px solid transparent;
}

.ucp-tab:hover{
  color: var(--ucp-text);
}

.ucp-tab.is-active{
  color: var(--ucp-text);
  border-bottom-color: var(--ucp-primary);
}

.ucp-tabpanel{ display:none; }
.ucp-tabpanel.is-active{ display:block; }

/* Help nav (Client sidebar) */
#ucp-admin-app .ucp-help-nav{ padding: 10px; }