/* static/portal.css */
/* Full file (QuickBooks-inspired table styling + pricing alignment + dropdown/modal + kv) */

@import url("assets/css/fontawesome-min.css");

:root{
  --bg1:#070b14;
  --bg2:#0b1220;

  --glass1: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.16);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);

  --brand: #ff8a00;
  --brand2:#ffb703;

  --danger:#ff004c;
  --ok:#00ff8c;
  --warn:#ffd000;

  /* accents */
  --blue:#2d8cff;
  --green:#23c55e;
  --amber:#f5c84b;

  --radius: 18px;
  --radius2: 24px;
  --shadow: 0 20px 70px rgba(0,0,0,.35);
  --focus: 0 0 0 4px rgba(255,138,0,.28);

  /* QuickBooks-ish neutrals */
  --panel: rgba(10,14,24,.55);
  --panel2: rgba(10,14,24,.35);
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.14);
  --accent-glow1: rgba(255,138,0,.20);
  --accent-glow2: rgba(255,183,3,.14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

html{
  background:
    radial-gradient(1200px 600px at 15% 5%, var(--accent-glow1), transparent 55%),
    radial-gradient(900px 500px at 85% 15%, var(--accent-glow2), transparent 55%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
}

body{
  margin:0;
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: transparent;
  position: relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(1200px 600px at 15% 5%, var(--accent-glow1), transparent 55%),
    radial-gradient(900px 500px at 85% 15%, var(--accent-glow2), transparent 55%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
}

/* Links */
a{ color: inherit; text-decoration:none; }
a:hover{ opacity:.95; }

/* Force light headings */
h1, h2, h3, h4, h5, h6{ color: var(--text) !important; }
.text-muted, .muted, .small{ color: var(--muted) !important; }

.menu-title,
.sidebar-title,
.dashboard-title,
.section-title,
.chart-title,
.portal-title{ color: var(--text) !important; }

/* ========================= */
/* ✅ FLASH ALERT BUBBLES     */
/* ========================= */
.alert{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  white-space: nowrap;
}

.alert.error{
  background: rgba(255,0,76,.20);
  border-color: rgba(255,0,76,.35);
  color: rgba(255,255,255,.95);
}

.alert.success{
  background: rgba(0,255,140,.18);
  border-color: rgba(0,255,140,.34);
  color: rgba(255,255,255,.95);
}

.alert.warning{
  background: rgba(245,200,75,.18);
  border-color: rgba(245,200,75,.28);
  color: rgba(255,255,255,.95);
}

/* Layout */
.portal-wrap{
  width: min(1200px, calc(100% - 32px));
  margin: 22px auto;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 18px;
}

/* Glass cards */
.portal-card{
  background: linear-gradient(180deg, var(--glass1) 0%, var(--glass2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.portal-card-hd{
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.portal-card-bd{ padding: 18px; }

.portal-title{
  margin:0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing:.2px;
}

.portal-sub{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Buttons */
.btnx{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, filter .15s ease;
  user-select:none;
}
.btnx:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.btnx:active{ transform: translateY(1px); }

.btnx-small{
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.btnx-primary{
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  border-color: color-mix(in srgb, var(--brand) 52%, var(--line2) 48%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.btnx-primary:hover{
  background: color-mix(in srgb, var(--brand) 28%, transparent);
  border-color: color-mix(in srgb, var(--brand) 64%, var(--line2) 36%);
}

.btnx-danger{
  background: rgba(255, 0, 0, 0.459);
  border-color: rgba(255,0,76,.26);
}

.btnx-muted{
  background: rgba(255,255,255,.06);
}

/* “View” blue and “Mark Paid” green */
.btnx-view,
.btnx-info{
  background: rgba(45,140,255,.22);
  border-color: rgba(45,140,255,.34);
  color: rgba(255,255,255,.95);
}
.btnx-view:hover,
.btnx-info:hover{
  background: rgba(45,140,255,.30);
  border-color: rgba(45,140,255,.46);
}

.btnx-success{
  background: rgba(35,197,94,.22);
  border-color: rgba(35,197,94,.34);
  color: rgba(255,255,255,.95);
}
.btnx-success:hover{
  background: rgba(35,197,94,.30);
  border-color: rgba(35,197,94,.46);
}

/* Forms */
label{
  display:block;
  margin: 10px 0 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
input, textarea, select{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: var(--text);
  outline:none;
}
textarea{ min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.55); }
input:focus, textarea:focus, select:focus{
  border-color: rgba(255,138,0,.35);
  box-shadow: var(--focus);
}

/* Utilities */
.stack{ display:flex; flex-wrap:wrap; gap: 10px; }
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.hr{ height:1px; background: rgba(255,255,255,.12); margin: 14px 0; }

/* Key/Value grid (used by proposal + invoice details) */
.kv{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 14px;
  align-items: start;
}
.kv .k{
  color: rgba(255,255,255,.78);
  font-weight: 900;
}
.kv .v{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

/* Tables (generic) */
.table-wrap{
  width:100%;
  overflow-x:auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
}

.tablex{
  width:100%;
  border-collapse: collapse;
  min-width: 760px;
}

.tablex th{
  text-align:left;
  padding: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.90) !important;
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}

.tablex td{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  vertical-align: top;
  color: var(--text);
}

.tablex tr:hover td{ background: rgba(255,255,255,.05); }

/* ========================================================= */
/* ✅ QUICKBOOKS-STYLE PRICING TABLE (Proposal View)          */
/* ========================================================= */

.pricing-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* lock column widths so long description can't shift numeric columns */
  margin-top: 10px;

  /* QuickBooks feel: boxed table */
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.10);
}

/* Header row */
.pricing-table thead th{
  padding: 14px 14px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid var(--line2);
  white-space: nowrap;
}

/* Body cells */
.pricing-table td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
  color: rgba(255,255,255,.90);
}

/* Column widths */
.pricing-table th:nth-child(1),
.pricing-table td:nth-child(1){
  width: 70%;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 20px;
}

.pricing-table th:nth-child(2),
.pricing-table td:nth-child(2){ width: 10%; }

.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3){ width: 8%; }

.pricing-table th:nth-child(4),
.pricing-table td:nth-child(4){ width: 12%; }

/* Right-align numeric columns + keep them on one line */
.pricing-table th:nth-child(2),
.pricing-table th:nth-child(3),
.pricing-table th:nth-child(4),
.pricing-table td:nth-child(2),
.pricing-table td:nth-child(3),
.pricing-table td:nth-child(4){
  text-align: right;
  white-space: nowrap;
}

/* ✅ Make numbers look aligned even when description is tall */
.pricing-table td:nth-child(2),
.pricing-table td:nth-child(3),
.pricing-table td:nth-child(4){
  vertical-align: top;
  padding-top: 18px; /* visually lines up with first line of description block */
}

/* Hover like QuickBooks */
.pricing-table tbody tr:hover td{
  background: rgba(255,255,255,.04);
}

/* Item name/desc helpers */
.item-name{
  font-weight: 900;
  display:block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.95);
}
.item-desc{
  color: rgba(255,255,255,.74);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Make line total slightly stronger */
.pricing-table td:nth-child(4){
  font-weight: 900;
}

/* ===== Grand Total aligned with pricing table (Line Total column) ===== */
.total-section{
  margin-top: 16px;

  /* match pricing-table columns exactly: 70 / 10 / 8 / 12 */
  display: grid;
  grid-template-columns: 70% 10% 8% 12%;
}

.grand-total{
  grid-column: 4;            /* lock under Line Total */
  justify-self: stretch;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;

  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
}

.grand-total span:first-child{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.72);
}

.grand-total span:last-child{
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  text-align: right;
  white-space: nowrap;
}

/* ========================================================= */

/* ✅ BADGES / STATUS PILLS */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  white-space: nowrap;
}

/* Paid / Accepted */
.badge-ok,
.badge-paid,
.badge-accepted{
  background: rgba(43, 255, 0, 0.486);
  border-color: rgba(51, 255, 0, 0.34);
}

/* Pending */
.badge-info,
.badge-pending{
  background: rgba(45,140,255,.22);
  border-color: rgba(45,140,255,.34);
}

/* Viewed / Sent */
.badge-warn,
.badge-viewed,
.badge-sent{
  background: rgba(245,200,75,.18);
  border-color: rgba(245,200,75,.28);
}

/* Invoiced / Draft */
.badge-neutral,
.badge-invoiced,
.badge-draft{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* Bad / overdue */
.badge-bad{
  background: rgba(255, 0, 0, 0.651);
  border-color: rgba(255,0,76,.26);
}

/* Dashboard / Client stat bubbles */
.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 28px;
}

.card{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.card h5{
  font-size: 14px;
  font-weight: 800;
  color: var(--muted) !important;
  margin: 0 0 8px 0;
}
.card p{
  font-size: 28px;
  font-weight: 900;
  color: var(--text) !important;
  margin: 0 0 6px 0;
}
.card small{
  font-size: 12px;
  color: var(--muted) !important;
}

/* Chart containers */
.chart-container{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  padding: 14px;
  margin-top: 18px;
}
.chart-container h5{
  margin: 0 0 10px;
  color: var(--text) !important;
  font-size: 14px;
  font-weight: 900;
}
.chart-container canvas{
  width:100% !important;
  height:auto !important;
}

/* Image gallery */
.image-gallery{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 10px; }
.image-item{ position:relative; display:inline-block; }
.image-item img{
  width: 104px;
  height: 104px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.16);
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Popup (image viewer) */
.popup{
  display:none;
  position:fixed;
  z-index: 2000;
  inset:0;
  background: rgba(0,0,0,.82);
  justify-content:center;
  align-items:center;
  padding: 18px;
}
.popup-content{
  max-width: min(980px, 92vw);
  max-height: 86vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 25px 100px rgba(0,0,0,.55);
}
.close{
  position:absolute;
  top: 18px;
  right: 22px;
  font-size: 44px;
  line-height: 1;
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  background:none;
  border:none;
}

/* ✅ Dropdown (More Actions) */
.dropdown{
  position: relative;
  display: inline-block;
}

.dropdown-content{
  display: none;              /* default hidden */
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  z-index: 2500;

  background: color-mix(in srgb, var(--bg2) 88%, black 12%);
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* This class will be toggled with JS */
.dropdown-content.show{
  display: block;
}

/* ==========================================
   TABLE DROPDOWNS → INLINE EXPAND (ALL SIZES)
   Expands row cleanly inside the box
   ========================================== */

.dropdown{
  display: inline-block;
  width: 100%;
}

.dropdown > button{
  width: 100%;
}


/* ==============================
   ACTION COLUMN — CLEAN & FULL WIDTH
   ============================== */

/* Keep strict table grid */
.tablex{
  table-layout: fixed;
}

/* Actions column centered */
.tablex th:nth-child(5),
.tablex td:nth-child(5){
  text-align: center;
  vertical-align: middle;
}

/* Dropdown wrapper takes full column width */
.table-wrap .dropdown{
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* key */
  width: 100%;
}

/* Actions button full width */
.table-wrap .dropdown > .btnx{
  width: 100%;
  justify-content: center;
}

/* Inline panel */
.table-wrap .dropdown-content{
  position: static !important;
  display: none;

  margin-top: 8px;
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;

  background: color-mix(in srgb, var(--bg2) 88%, black 12%);
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: var(--shadow);

  overflow: hidden;
}

.table-wrap .dropdown-content.show{
  display: block;
}

/* Show state */
.table-wrap .dropdown-content.show{
  display: block;
}

/* Make menu items look like clean rows */
.dropdown-content a,
.dropdown-content button{
  display:block;
  width:100%;
  text-align:left;
  padding: 12px 14px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor:pointer;
  font-weight: 800;
}

.dropdown-content a:hover,
.dropdown-content button:hover{
  background: var(--glass1);
}

/* ✅ Modal (Share link) */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index: 3000;
  background: rgba(0,0,0,.65);
  padding: 18px;
}
.modal-content{
  width: min(520px, 92vw);
  margin: 8vh auto 0;
  background: color-mix(in srgb, var(--bg2) 88%, black 12%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-content h3{ margin: 0 0 8px; }
.modal-content p{ margin: 0 0 12px; color: var(--muted); }
.modal-content input{
  width: 100%;
  margin: 8px 0 12px;
}
.modal-content .close{
  position: static;
  float: right;
  font-size: 26px;
  line-height: 1;
  opacity: .9;
}

.client-view-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.client-view-identity{
  display:flex;
  gap:14px;
  align-items:center;
  min-width:0;
}

.client-view-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line2);
  flex:0 0 auto;
}

.client-view-meta{
  min-width:0;
}

.client-view-name{
  margin:0;
  line-height:1.1;
  color:var(--text) !important;
}

.client-view-org{
  margin:6px 0 0;
  color:var(--muted);
}

.client-view-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.client-view-info{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}

.client-view-info-title{
  margin:0 0 10px;
  font-size:16px;
  font-weight:900;
}

.client-view-info-line{
  margin:0 0 4px;
  color:var(--text);
}

.client-view-action-col{
  min-width:220px;
}

.client-view-danger-action{
  color:#ffb3b3 !important;
}

.table-section{
  margin-top: 26px;
}

.table-section h3{
  margin: 0 0 14px;
  color: var(--text) !important;
}

.overview + .table-section{
  margin-top: 20px;
}

.card-grid + .table-section{
  margin-top: 28px;
}

/* Proposal image grid helpers */
.proposal-image-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.proposal-image-card{
  position:relative;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.15);
  min-height: 120px;
}

.proposal-image-thumb{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
}

.proposal-image-x{
  position:absolute;
  top:8px;
  right:8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 28px;
  font-weight: 900;
  background: rgba(0,0,0,0.65);
  color: white;
}
.proposal-image-x:hover{
  background: rgba(255,0,0,0.65);
}

/* Bubble “No image in database” */
.no-image-bubble{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* ==========================================
   ACTION COLUMN — CLEAN PROFESSIONAL VERSION
   ========================================== */

/* Strict table grid */
.tablex{
  table-layout: fixed;
  width: 100%;
}

/* Column widths */
.tablex th:nth-child(1),
.tablex td:nth-child(1){ width: 90px; }

.tablex th:nth-child(2),
.tablex td:nth-child(2){ width: 140px; }

.tablex th:nth-child(3),
.tablex td:nth-child(3){ width: 140px; }

.tablex th:nth-child(4),
.tablex td:nth-child(4){ width: 140px; }

.tablex th:nth-child(5),
.tablex td:nth-child(5){ width: 190px; }

/* Clean alignment */
.tablex th:nth-child(3),
.tablex td:nth-child(3){
  text-align: right;
}

.tablex th:nth-child(4),
.tablex td:nth-child(4){
  text-align: center;
}

.tablex th:nth-child(5),
.tablex td:nth-child(5){
  text-align: center;
  vertical-align: middle;
}

/* Dropdown wrapper full width */
.table-wrap .dropdown{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Button full width */
.table-wrap .dropdown > .btnx{
  width: 100%;
  justify-content: center;
}

/* Inline expand panel */
.table-wrap .dropdown-content{
  position: static !important;
  display: none;

  margin-top: 8px;
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;

  background: rgba(10,14,24,.95);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  overflow: hidden;
}

.table-wrap .dropdown-content.show{
  display: block;
}

/* Dashboard charts: guarantee visible height on mobile */
.chart-wrap{
  height: 280px;          /* real height, not just min-height */
}

.chart-wrap canvas{
  width: 100% !important;
  height: 100% !important; /* critical for Chart.js when maintainAspectRatio:false */
}

/* Sidebar should not stretch to match main card height */
.portal-wrap > aside.portal-card{
  align-self: start;
  height: fit-content;
}

/* Print */
@media print{
  body{ background: #fff !important; color:#000 !important; }
  .portal-wrap{ width: 100% !important; margin:0 !important; grid-template-columns: 1fr !important; }
  aside{ display:none !important; }
  .portal-card{ box-shadow:none !important; border: 1px solid #ddd !important; background:#fff !important; }
  .btnx, .dropdown, .dropdown-content{ display:none !important; }
}

/* Responsive */
@media (max-width: 980px){
  .portal-wrap{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .portal-wrap{
    width: calc(100% - 18px);
    margin: 14px auto;
    gap: 12px;
  }
  .portal-card-bd{ padding: 14px; }
  .row2, .row3{ grid-template-columns: 1fr; }
  .btnx{ width:100%; }
  .kv{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: 1fr; }
}


/* ===========================
   MOBILE: TABLE -> CARD LIST
   =========================== */
@media (max-width: 640px){

  /* Make header area stack cleaner */
  .portal-card-hd{
    flex-direction: column;
    align-items: flex-start;
  }
  .portal-card-hd .stack{
    width:100%;
  }

  /* Turn tables into stacked cards */
  .table-wrap{
    overflow: visible;
    background: transparent;
    border: 0;
  }

  table.tablex-responsive{
    min-width: 0 !important;
  }
  .tablex-responsive thead{
    display:none;
  }
  .tablex-responsive tbody tr{
    display:block;
    margin: 0 0 12px 0;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.12);
  }
  .tablex-responsive tbody td{
    display:flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .tablex-responsive tbody td:last-child{
    border-bottom: 0;
  }
  .tablex-responsive tbody td::before{
    content: attr(data-label);
    font-weight: 900;
    color: rgba(255,255,255,.72);
    flex: 0 0 auto;
    padding-right: 10px;
  }

  /* Actions column becomes a vertical block */
  .tablex-responsive tbody td[data-label="Actions"]{
    flex-direction: column;
    align-items: stretch;
  }
  .tablex-responsive tbody td[data-label="Actions"]::before{
    margin-bottom: 6px;
  }

  /* Dropdown menu works better as an inline panel on mobile */
  .tablex-responsive .dropdown{
    width: 100%;
  }
  .tablex-responsive .dropdown > button{
    width: 100%;
  }
  .tablex-responsive .dropdown-content{
    position: static;
    min-width: 0;
    margin-top: 8px;
  }

  /* Make button-forms behave like buttons inside .stack */


  .btnx-form{
    display:inline-flex;
    margin:0;
  }

  /* On mobile, allow the form to stretch so the button can be full width */
  @media (max-width: 640px){
    .btnx-form{
      width: 100%;
      display: flex;
    }
    .btnx-form .btnx{
      width: 100%;
    }
  }
}