/* =========================================================
   Thinkit Content Portal – Public Styles
   ========================================================= */

:root{
  --tcp-blue:#0049DB;
  --tcp-blue-dark:#003bb5;
  --tcp-light:#f5f6f8;
  --tcp-border:#e5e7eb;
}

/* Layout */
.tcp-wrap{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:18px 20px;
  box-sizing:border-box;
}
.tcp-wide{
  max-width:100%;
}

.tcp-page h2{ margin: 0 0 12px 0; }

.tcp-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin: 12px 0;
}

.tcp-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 10px 0;
}

/* Notices */
.tcp-notice{
  padding:12px;
  border-left:4px solid var(--tcp-blue);
  background:#fff;
  border-radius:10px;
  margin: 12px 0;
}
.tcp-notice-success{ border-left-color: var(--tcp-blue); }
.tcp-notice-error{ border-left-color: #dc3232; }

/* Cards */
.tcp-card{
  border:1px solid var(--tcp-border);
  border-radius:12px;
  padding:14px;
  background:#fff;
  margin: 14px 0;
}
.tcp-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.tcp-card-title{ font-weight:700; font-size:18px; }
.tcp-card-total{ font-weight:800; font-size:18px; }
.tcp-muted{ color:#6b7280; }

/* Table baseline */
.tcp-table{
  width:100%;
  border-collapse:collapse;
}
.tcp-table th,
.tcp-table td{
  padding:14px 12px;
  vertical-align:middle;
  border-bottom:1px solid var(--tcp-border);
}

/* Headers */
.tcp-table thead th{
  background:var(--tcp-blue);
  color:#fff;
  text-align:center;
  white-space:nowrap;
  letter-spacing:.2px;
}

/* Row striping */
.tcp-table tbody tr:nth-child(odd){ background:#fff; }
.tcp-table tbody tr:nth-child(even){ background:#f2f4f7; }

.tcp-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Inventory desktop readability */
#tcpInventoryTable td:nth-child(1){ font-weight:600; }
#tcpInventoryTable td:nth-child(3),
#tcpInventoryTable td:nth-child(4),
#tcpInventoryTable td:nth-child(7),
#tcpInventoryTable td:nth-child(8){ white-space:nowrap; }

/* =========================================================
   Buttons (SCOPED to portal pages)
   ========================================================= */
.tcp-wrap .button,
.tcp-wrap .wp-core-ui .button{
  background: var(--tcp-blue) !important;
  color:#fff !important;
  border:1px solid var(--tcp-blue) !important;
  padding:10px 16px !important;
  border-radius:10px !important;
  line-height:1.2 !important;
  text-decoration:none !important;
}

.tcp-wrap .button:hover,
.tcp-wrap .wp-core-ui .button:hover{
  background:#fff !important;
  color: var(--tcp-blue) !important;
  border-color: var(--tcp-blue) !important;
}

.tcp-wrap .button.button-primary,
.tcp-wrap .wp-core-ui .button-primary{
  background: var(--tcp-blue) !important;
  border-color: var(--tcp-blue) !important;
  color:#fff !important;
}

.tcp-wrap .button.button-primary:hover,
.tcp-wrap .wp-core-ui .button-primary:hover{
  background:#fff !important;
  color: var(--tcp-blue) !important;
}

/* Small action buttons */
.tcp-btn-sm{
  padding:6px 10px !important;
  font-size:13px !important;
  min-height:unset !important;
}

/* =========================================================
   Create Content UI
   ========================================================= */
.tcp-label{
  display:block;
  font-weight:700;
  margin: 10px 0 6px 0;
}
.tcp-input,
.tcp-select,
.tcp-textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--tcp-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}
.tcp-textarea{ resize:vertical; min-height:220px; }

.tcp-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 820px){
  .tcp-grid-2{ grid-template-columns: 1fr; }
}

.tcp-mode-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 14px 0;
}
.tcp-mode-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--tcp-blue);
  background:#fff;
  color: var(--tcp-blue);
  text-decoration:none;
  font-weight:800;
}
.tcp-mode-btn.is-active{
  background: var(--tcp-blue);
  color:#fff;
}
.tcp-mode-btn:hover{
  background: var(--tcp-blue);
  color:#fff;
}

/* =========================================================
   Logged-in Portal Navigation
   ========================================================= */
.tcp-nav{
  background:#fff;
  border:1px solid var(--tcp-border);
  border-radius:14px;
  padding:10px;
  margin: 0 0 16px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.tcp-nav-inner{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.tcp-nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--tcp-blue);
  color:var(--tcp-blue);
  background:#fff;
  text-decoration:none;
  font-weight:800;
  line-height:1;
}
.tcp-nav-link:hover{ background:var(--tcp-blue); color:#fff; }
.tcp-nav-link.is-active{ background:var(--tcp-blue); color:#fff; }
.tcp-nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:var(--tcp-blue);
  color:#fff;
  border:1px solid rgba(255,255,255,0.85);
}
@media (max-width: 520px){
  .tcp-nav-link{ width:100%; justify-content:space-between; }
}

/* =========================================================
   TRUE mobile “no sideways scroll” tables → cards
   (Inventory + Orders)
   ========================================================= */
@media (max-width: 820px){

  /* Inventory cards */
  #tcpInventoryTable thead{ display:none; }
  #tcpInventoryTable,
  #tcpInventoryTable tbody,
  #tcpInventoryTable tr,
  #tcpInventoryTable td{
    display:block;
    width:100%;
  }
  #tcpInventoryTable tr{
    border:1px solid var(--tcp-border);
    border-radius:14px;
    padding:12px;
    margin:12px 0;
    background:#fff;
  }
  #tcpInventoryTable td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border:none;
    text-align:left !important;
  }
  #tcpInventoryTable td::before{
    content: attr(data-label);
    font-weight:800;
    color:#111827;
    flex: 0 0 110px;
  }
  #tcpInventoryTable td[data-label=""]{
    justify-content:flex-end;
  }

  /* Orders cards */
  .tcp-orders-table thead{ display:none; }
  .tcp-orders-table,
  .tcp-orders-table tbody,
  .tcp-orders-table tr,
  .tcp-orders-table td{
    display:block;
    width:100%;
  }
  .tcp-orders-table tr{
    border:1px solid var(--tcp-border);
    border-radius:14px;
    padding:12px;
    margin:12px 0;
    background:#fff;
  }
  .tcp-orders-table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border:none;
    text-align:left !important;
  }
  .tcp-orders-table td::before{
    content: attr(data-label);
    font-weight:800;
    color:#111827;
    flex: 0 0 110px;
  }
}
/* ================================
   Order progress badge
   ================================ */
.tcp-progress{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin: 8px 0 12px 0;
}

.tcp-progress-label{
  color:#111827;
}

.tcp-steps{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.tcp-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--tcp-border);
  background:#fff;
  color:#6b7280;
  font-weight:800;
  font-size:12px;
  line-height:1;
}

.tcp-step.is-done{
  background: var(--tcp-blue);
  color:#fff;
  border-color: var(--tcp-blue);
}
/* ================================
   Order progress badge
   ================================ */
.tcp-progress{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin: 8px 0 12px 0;
}

.tcp-progress-label{
  color:#111827;
}

.tcp-steps{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.tcp-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--tcp-border);
  background:#fff;
  color:#6b7280;
  font-weight:800;
  font-size:12px;
  line-height:1;
}

.tcp-step.is-done{
  background: var(--tcp-blue);
  color:#fff;
  border-color: var(--tcp-blue);
}



/* =====================================
 * TCP Button Spinner
 * ===================================== */

.tcp-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: tcp-spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes tcp-spin {
  to { transform: rotate(360deg); }
}

button.tcp-is-working,
.button.tcp-is-working {
  opacity: 0.85;
  cursor: not-allowed;
}


/* =====================================
 * View Article Button (Published)
 * ===================================== */

.tcp-view-article,
.tcp-view-article.button {
  background: #F98740 !important;
  border-color: #F98740 !important;
  color: #fff !important;
}

.tcp-view-article:hover,
.tcp-view-article.button:hover {
  filter: brightness(0.95);
}


/* =========================================================
 * Portal Auth (login/register tabs)
 * ========================================================= */
.tcp-auth{
  max-width:520px;
  margin:20px auto;
  background:#f3f4f6;
  border:1px solid var(--tcp-border);
  border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:0 2px 14px rgba(0,0,0,.05);
}
.tcp-auth-tabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.tcp-auth-tab{
  flex:1;
  padding:10px 12px;
  border:1px solid var(--tcp-border);
  background:#f5f7fb;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.tcp-auth-tab.is-active{
  background:var(--tcp-blue);
  color:#fff;
  border-color:var(--tcp-blue);
}
.tcp-auth-panel{ display:none; }
.tcp-auth-panel.is-active{ display:block; }
.tcp-auth-title{ margin:6px 0 12px; }
.tcp-auth-form label{
  display:block;
  font-weight:600;
  margin:10px 0 6px;
}
.tcp-auth-form input{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--tcp-border);
  border-radius:10px;
  background:#fff;
}
.tcp-btn-wide{
  width:100%;
  margin-top:14px;
  padding:12px 14px !important;
}
.tcp-auth-note{
  margin-top:10px;
  font-size:13px;
}
.tcp-notice{
  background:#eef5ff;
  border:1px solid #cfe2ff;
  color:#1f3a63;
  padding:10px 12px;
  border-radius:10px;
  margin:8px 0 12px;
}
/* My Purchases – unpaid item actions */
.tcp-order-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tcp-order-actions .button {
  margin: 0;
}

/* Optional: make Remove slightly less dominant */
.tcp-order-actions .tcp-remove-item {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ccc;
}

.tcp-order-actions .tcp-remove-item:hover {
  background-color: #eee;
}
/* --- FORCE side-by-side buttons in My Purchases action column --- */
/* Covers common wrappers/classes used in this plugin + WP button styles */
.tcp-order-actions,
.tcp-actions,
.tcp-item-actions,
td.tcp-col-action,
.tcp-col-action {
  white-space: nowrap;
}

td.tcp-col-action .button,
td.tcp-col-action a.button,
td.tcp-col-action .tcp-btn-sm,
.tcp-col-action .button,
.tcp-col-action a.button,
.tcp-col-action .tcp-btn-sm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle;
}

/* If there is a wrapper around the two buttons, make it flex */
td.tcp-col-action .tcp-order-actions,
td.tcp-col-action .tcp-actions,
td.tcp-col-action .tcp-item-actions,
.tcp-col-action .tcp-order-actions,
.tcp-col-action .tcp-actions,
.tcp-col-action .tcp-item-actions {
  display: inline-flex !important;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

/* Last button in the row shouldn't add extra right margin */
td.tcp-col-action .button:last-child,
td.tcp-col-action a.button:last-child,
td.tcp-col-action .tcp-btn-sm:last-child,
.tcp-col-action .button:last-child,
.tcp-col-action a.button:last-child,
.tcp-col-action .tcp-btn-sm:last-child {
  margin-right: 0 !important;
}
/* My Purchases: keep Pay + Remove on one line */
td[data-label="Action"] {
  white-space: nowrap;
}

td[data-label="Action"] .tcp-inline-form,
td[data-label="Action"] form.tcp-inline-form,
td[data-label="Action"] form.tcp-remove-unpaid-form {
  display: inline-block !important;
  margin: 0 0 0 8px !important; /* spacing between buttons */
  vertical-align: middle;
}

td[data-label="Action"] a.button.tcp-btn-sm,
td[data-label="Action"] button.tcp-btn-sm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  margin: 0 !important;
  vertical-align: middle;
}