/* Amogh ERP — product cards, the products hub page and its dialog. Used by hub.html, home.html and the dashboard's "My Products" screen. */

:root { --hub-primary: #4a4dbc; --hub-primary-dark: #363990; --hub-ink: #1f2430; --hub-muted: #6b7280; --hub-line: #e5e7eb; --hub-bg: #f2f4f9; --hub-ok: #16a34a; --hub-warn: #d97706; }

/* ---- shared product cards ---- */
.hub-grid, .lp-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.hub-card { background: #fff; border: 1px solid var(--hub-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 18px rgba(20, 24, 46, 0.05); }
.hub-icon { width: 46px; height: 46px; border-radius: 12px; background: #ecedfb; color: var(--hub-primary); display: grid; place-items: center; font-size: 20px; margin-bottom: 4px; }
.hub-name { font-weight: 700; font-size: 17px; }
.hub-tag { color: var(--hub-muted); font-size: 13.5px; flex: 1; }
.hub-state { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; flex-wrap: wrap; }
.hub-pill { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.hub-pill-on { background: #e7f7ed; color: var(--hub-ok); }
.hub-pill-off { background: #fdf0e3; color: var(--hub-warn); }
.hub-pill-soon { background: #eef0f5; color: var(--hub-muted); }
.hub-days { font-size: 12.5px; color: var(--hub-muted); }
.hub-off .hub-icon { background: #f3f4f6; color: #9aa0ad; }
.hub-soon { opacity: 0.8; }
.hub-btn { border: 1px solid var(--hub-primary); border-radius: 9px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; cursor: pointer; background: #fff; color: var(--hub-primary); width: 100%; }
.hub-btn:disabled { opacity: 0.6; cursor: default; }
.hub-btn-solid { background: var(--hub-primary); color: #fff; }
.hub-btn-solid:hover { background: var(--hub-primary-dark); }

/* ---- hub page ---- */
.hub-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 20px 60px; }
.hub-welcome h2 { margin: 0 0 4px; font-size: 26px; }
.hub-welcome p { margin: 0 0 22px; color: var(--hub-muted); }
.hub-section { margin: 22px 0 10px; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hub-muted); }
.hub-empty, .hub-loading { color: var(--hub-muted); padding: 24px 4px; }

/* ---- dialog ---- */
.hub-overlay { position: fixed; inset: 0; background: rgba(20, 24, 46, 0.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.hub-dialog { background: #fff; border-radius: 16px; padding: 26px; width: min(480px, 100%); max-height: 92vh; overflow: auto; position: relative; }
.hub-dialog h3 { margin: 0 0 6px; font-size: 21px; }
.hub-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; color: var(--hub-muted); cursor: pointer; }
.hub-muted { color: var(--hub-muted); font-size: 14px; }
.hub-list { list-style: none; padding: 0; margin: 4px 0 12px; }
.hub-list li { padding: 3px 0; font-size: 14.5px; }
.hub-list i { color: var(--hub-ok); margin-right: 6px; }
.hub-label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.hub-dialog textarea { width: 100%; border: 1px solid var(--hub-line); border-radius: 9px; padding: 9px 12px; font: inherit; resize: vertical; }
.hub-error { color: #ed1c24; font-size: 13px; min-height: 18px; margin: 6px 0; }

/* plans dialog + plan cards */
.hub-dialog-wide { width: min(880px, 100%); }
.hub-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; }
.hub-plan { border: 1px solid var(--hub-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.hub-plan-name { font-weight: 700; font-size: 16px; }
.hub-plan-price { font-size: 15px; color: var(--hub-primary); font-weight: 600; }
.hub-plan-price span { font-size: 12.5px; color: var(--hub-muted); font-weight: 400; }
.hub-plan .hub-list { flex: 1; margin: 4px 0 8px; }

.hub-plan-tag { font-size: 12.5px; color: var(--hub-muted); margin-bottom: 2px; }
.hub-compare-wrap { overflow-x: auto; margin-top: 16px; background: #fff; border: 1px solid var(--hub-line); border-radius: 12px; }
.hub-compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.hub-compare th, .hub-compare td { padding: 9px 12px; border-bottom: 1px solid var(--hub-line); text-align: center; }
.hub-compare th:first-child, .hub-compare td:first-child { text-align: left; }
.hub-compare thead th { background: #f7f8fc; font-weight: 700; }
.hub-compare-price td { font-weight: 700; color: var(--hub-primary); background: #fbfbfe; }
.hub-compare-price td span { font-weight: 400; color: var(--hub-muted); font-size: 12px; }
.hub-yes { color: var(--hub-ok); }
.hub-no { color: #b5bac5; }
.hub-compare tbody tr:last-child td { border-bottom: 0; }

.hub-plan-feat { border-color: var(--hub-primary); box-shadow: 0 16px 40px rgba(74, 77, 188, 0.18); }
.hub-plan .hub-btn-outline { margin-top: auto; }
.hub-shared { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--hub-line); }
.hub-shared-title { font-weight: 700; margin-bottom: 8px; }
.hub-shared-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; font-size: 13.5px; }
.hub-shared-list li { padding: 3px 0; break-inside: avoid; }
.hub-shared-list i { color: var(--hub-ok); margin-right: 6px; }
@media (max-width: 640px) { .hub-shared-list { columns: 1; } }

.hub-card .hub-btn + .hub-btn { margin-top: 8px; }

/* profile dialog on the products page */
.hub-prof-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #eceef8; font-size: 14.5px; }
.hub-prof-row span { color: #6b7385; }
.hub-prof-row b { font-weight: 600; text-align: right; word-break: break-word; }

/* Billing (Profile page and the profile dialog) */
.hub-bill { border: 1px solid var(--hub-line); border-radius: 14px; padding: 18px; margin-bottom: 14px; background: #fff; }
.hub-bill-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hub-bill-name { font-weight: 700; font-size: 17px; }
.hub-bill-line { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #eceef8; font-size: 14.5px; }
.hub-bill-line span { color: var(--hub-muted); }
.hub-bill-table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 14px; }
.hub-bill-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--hub-muted); padding: 6px; border-bottom: 1px solid var(--hub-line); }
.hub-bill-table td { padding: 9px 6px; border-bottom: 1px solid #eceef8; vertical-align: top; }
.hub-bill-inc { margin: 12px 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--hub-muted); }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-chip { background: #f2f3fb; border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.hub-chip i { color: var(--hub-ok); margin-right: 5px; font-size: 11px; }