/**
 * IMDTEC Account — Standard Tables (Google Admin-like)
 * Scope: account.imdtec.net front-end
 *
 * Applies to:
 *  - .ps-table (shared table component)
 *  - #imdtec-certificates (LearnHub certificates shortcode table)
 */

body.imdtec-site-account{
  --ps-table-radius: 14px;
  --ps-table-border: var(--ps-account-border, rgba(60, 64, 67, 0.12));
  --ps-table-text: var(--ps-account-text, #1f1f1f);
  --ps-table-muted: var(--ps-account-muted, #5f6368);
  --ps-table-blue: var(--ps-account-blue, #1a73e8);

  --ps-table-bg: #fff;
  --ps-table-head-bg: #f8f9fa;
  --ps-table-row-hover: rgba(60, 64, 67, 0.06);
}

/* Card wrapper */
body.imdtec-site-account .ps-table-card{
  background: var(--ps-table-bg);
  border: 1px solid var(--ps-table-border);
  border-radius: var(--ps-table-radius);
  overflow: hidden;
}

body.imdtec-site-account .ps-table-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ps-table-border);
}

body.imdtec-site-account .ps-table-card__title{
  margin:0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ps-table-text);
}

body.imdtec-site-account .ps-table-card__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

body.imdtec-site-account .ps-table-empty{
  padding: 16px;
  color: var(--ps-table-muted);
}

/* Table wrapper (allows horizontal scroll on small screens) */
body.imdtec-site-account .ps-table-wrap{
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Generic buttons */
body.imdtec-site-account .ps-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid var(--ps-table-border);
  background: #fff;
  color: var(--ps-table-text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

body.imdtec-site-account .ps-btn:hover{
  background: rgba(60, 64, 67, 0.06);
  text-decoration: none;
}

body.imdtec-site-account .ps-btn--brand{
  background: var(--ps-table-blue);
  border-color: var(--ps-table-blue);
  color: #fff;
}

body.imdtec-site-account .ps-btn--brand:hover{
  filter: brightness(0.98);
}

body.imdtec-site-account .ps-btn--ghost{
  background: #fff;
  color: var(--ps-table-blue);
  border-color: rgba(26,115,232,.25);
}

body.imdtec-site-account .ps-text-muted{
  color: var(--ps-table-muted);
}

/* Base table styling */
body.imdtec-site-account .ps-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px; /* keeps columns readable; wrapper will scroll on mobile */
}

body.imdtec-site-account .ps-table th,
body.imdtec-site-account .ps-table td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--ps-table-border);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  white-space: nowrap;
}

body.imdtec-site-account .ps-table td{
  color: var(--ps-table-text);
}

body.imdtec-site-account .ps-table thead th{
  background: var(--ps-table-head-bg);
  color: var(--ps-table-muted);
  font-weight: 600;
  font-size: 12px;
}

body.imdtec-site-account .ps-table-card .ps-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
}

body.imdtec-site-account .ps-table tbody tr:hover td{
  background: var(--ps-table-row-hover);
}

body.imdtec-site-account .ps-table tbody tr.is-highlight td{
  background: rgba(26,115,232,.08);
}

/* Status chips */
body.imdtec-site-account .ps-chip{
  display:inline-flex;
  align-items:center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--ps-table-border);
  background: rgba(60, 64, 67, 0.08);
  color: var(--ps-table-text);
}

body.imdtec-site-account .ps-chip--open{
  background: rgba(251, 188, 4, .15);
  border-color: rgba(251, 188, 4, .35);
  color: #b26a00;
}
body.imdtec-site-account .ps-chip--pending{
  background: rgba(66, 133, 244, .12);
  border-color: rgba(66, 133, 244, .28);
  color: #174ea6;
}
body.imdtec-site-account .ps-chip--progress{
  background: rgba(26,115,232,.10);
  border-color: rgba(26,115,232,.24);
  color: #1a73e8;
}
body.imdtec-site-account .ps-chip--resolved,
body.imdtec-site-account .ps-chip--closed{
  background: rgba(11, 128, 67, .12);
  border-color: rgba(11, 128, 67, .25);
  color: #0b8043;
}


/* Certificates table (shortcode output) — make it match the same skin */
body.imdtec-site-account table#imdtec-certificates{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.imdtec-site-account table#imdtec-certificates th,
body.imdtec-site-account table#imdtec-certificates td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--ps-table-border);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

body.imdtec-site-account table#imdtec-certificates th{
  background: var(--ps-table-head-bg);
  color: var(--ps-table-muted);
  font-weight: 600;
  font-size: 12px;
}

body.imdtec-site-account table#imdtec-certificates tr:hover td{
  background: var(--ps-table-row-hover);
}

/* Make certificate number column non-clickable (already enforced in learnhub CSS, kept here as a safety net) */
body.imdtec-site-account table#imdtec-certificates td:first-child a{
  pointer-events: none;
  cursor: default;
  color: inherit;
  text-decoration: none;
}