/* =========================================
   HDOA UI — Brand Theming + Responsive Table
   Core: Red #E20E11, Green #14602B, Ink #000605
   Accent: Peach #EDB6A3, Base: White
   ========================================= */

   :root{
    --hdoa-red:   #E20E11;
    --hdoa-green: #14602B;
    --hdoa-ink:   #000605;
    --hdoa-peach: #EDB6A3;
  
    --hdoa-line:        rgba(0, 6, 5, 0.12);
    --hdoa-surface:     #ffffff;
    --hdoa-surface-alt: rgba(0, 6, 5, 0.02);
    --hdoa-tab-bg:      rgba(0, 6, 5, 0.03);
    --hdoa-tab-line:    rgba(0, 6, 5, 0.14);
  
    --hdoa-success-bg:  rgba(20, 96, 43, 0.08);
    --hdoa-error-bg:    rgba(226, 14, 17, 0.08);
    --hdoa-info-bg:     rgba(0, 6, 5, 0.06);
  
    --hdoa-badge-pending-bg: rgba(237, 182, 163, 0.25);
    --hdoa-badge-pending-br: #EDB6A3;
    --hdoa-badge-pending-tx: #8a4b37;
  
    --hdoa-badge-active-bg:  rgba(20, 96, 43, 0.12);
    --hdoa-badge-active-br:  #14602B;
    --hdoa-badge-active-tx:  #124d26;
  }
  
  /* ----------------
     Boxes
     ---------------- */
  .hdoa-box{
    border:1px solid var(--hdoa-line);
    border-radius:8px;
    background:var(--hdoa-surface);
    padding:16px;
    margin:16px 0;
    max-width:720px;
    color:var(--hdoa-ink);
  }
  .hdoa-box h3{ margin-top:0; }
  
  .hdoa-success{ border-color:var(--hdoa-green); background:var(--hdoa-success-bg); }
  .hdoa-error  { border-color:var(--hdoa-red);   background:var(--hdoa-error-bg); }
  .hdoa-info   { border-color:var(--hdoa-ink);   background:var(--hdoa-info-bg); }
  
  /* Inputs inside boxes */
  .hdoa-box input[type="text"],
  .hdoa-box input[type="email"]{
    width:100%;
    max-width:420px;
    padding:8px;
    border:1px solid var(--hdoa-line);
    border-radius:6px;
    background:#fff;
    color:var(--hdoa-ink);
  }
  
  /* ----------------
     Layout (Dashboard)
     ---------------- */
  .hdoa-grid{
    display:grid;
    gap:16px;
    grid-template-columns:1fr;
  }
  @media (min-width:900px){
    .hdoa-grid{ grid-template-columns:1fr 1fr; }
  }
  
  /* Fill column width (remove narrow grey border look) */
  .hdoa-col .hdoa-box{ max-width:100%; }
  .hdoa-col .hdoa-table-wrapper,
  .hdoa-col .hdoa-table{ max-width:100%; }
  
  /* Auth strip */
  .hdoa-authstrip{
    margin:6px 0 12px;
    padding:8px 12px;
    background:var(--hdoa-surface-alt);
    border:1px solid var(--hdoa-line);
    border-radius:6px;
    color:var(--hdoa-ink);
  }
  
  /* ----------------
     Tabs
     ---------------- */
  .hdoa-tabs{
    display:flex;
    gap:8px;
    margin:0 0 8px;
  }
  .hdoa-tab{
    display:inline-block;
    padding:6px 10px;
    border:1px solid var(--hdoa-tab-line);
    border-radius:6px;
    background:var(--hdoa-tab-bg);
    text-decoration:none;
    color:var(--hdoa-ink);
    transition:border-color .15s, color .15s, background .15s;
  }
  .hdoa-tab:hover{ border-color:var(--hdoa-ink); }
  .hdoa-tab.is-active{
    background:#fff;
    border-color:var(--hdoa-green);
    color:var(--hdoa-green);
  }
  .hdoa-tabpanel{ margin-top:6px; }
  
  /* Tabs under the invite box */
  .hdoa-tabs--under-invite{ margin-top:8px; margin-bottom:0; }
  .hdoa-tabs--under-invite .hdoa-tab{ padding:5px 10px; }
  
  /* ----------------
     Badges (status)
     ---------------- */
  .hdoa-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    border:1px solid var(--hdoa-line);
    background:#fafafa;
    line-height:1.2;
    color:var(--hdoa-ink);
  }
  .hdoa-badge--pending{
    background:var(--hdoa-badge-pending-bg);
    border-color:var(--hdoa-badge-pending-br);
    color:var(--hdoa-badge-pending-tx);
  }
  .hdoa-badge--active{
    background:var(--hdoa-badge-active-bg);
    border-color:var(--hdoa-badge-active-br);
    color:var(--hdoa-badge-active-tx);
  }
  
  /* ----------------
     Table + wrapper
     ---------------- */
  .hdoa-table-wrapper{
    width:100%;
    overflow:visible;
  }
  .hdoa-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
    color:var(--hdoa-ink);
  }
  .hdoa-table th,
  .hdoa-table td{
    text-align:left;
    padding:10px 12px;
    border-bottom:1px solid var(--hdoa-line);
    vertical-align:middle;
    line-height:1.35;
    word-break:normal;      /* stop per-letter breaks */
    overflow-wrap:normal;
    white-space:nowrap;     /* default: keep tight columns on one line */
  }
  /* Allow wrapping where it helps */
  .hdoa-table th:nth-child(1),
  .hdoa-table td:nth-child(1){ /* Case */
    white-space:normal;
    max-width:420px;
  }
  .hdoa-table th:nth-child(3),
  .hdoa-table td:nth-child(3){ /* Partner */
    white-space:normal;
    max-width:280px;
  }
  .hdoa-table th:nth-child(4),
  .hdoa-table td:nth-child(4){ min-width:110px; } /* Status for badge width */
  
  .hdoa-table td:last-child a.button{ margin-right:6px; }
  
  /* Progress bar */
  .hdoa-progress{
    width:100%;
    height:10px;
    background:var(--hdoa-tab-bg);
    border-radius:6px;
    overflow:hidden;
    margin:12px 0 8px;
  }
  .hdoa-progress .bar{
    height:100%;
    width:0%;
    background:var(--hdoa-green);
  }
  
  /* Responsive: horizontal scroll for table on small screens */
  @media (max-width:768px){
    .hdoa-table-wrapper{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .hdoa-table{ min-width:640px; }
  }
  
  /* Helpers */
  .hdoa-right{ float:right; }
  .hdoa-muted{ color:rgba(0,6,5,0.6); }