/* Triplex extras: shared utilities, toasts, progress bar, cards, etc. */
/* Utilities */
.center-shell{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--triplex-gray-50);}
.card-auth{max-width:640px;width:100%;}
.logo-min{width:56px;height:56px;border-radius:12px;background:var(--triplex-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;letter-spacing:-.2px;margin:0 auto 20px;}
.muted{color:var(--triplex-gray-500);}
.h1{font-size:28px;line-height:1.2;margin:0 0 6px;color:var(--triplex-gray-900);font-weight:800;letter-spacing:-.2px;}
.lead{font-size:16px;margin:0 0 24px;}
.stack{display:flex;flex-direction:column;gap:16px;}
.w-full{width:100%;}
.hidden{display:none !important;}

/* Toast */
.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:12px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid;box-shadow:var(--triplex-shadow-md);
  background:#fff;transform:translateX(12px);opacity:0;transition:var(--triplex-transition);}
.toast.show{transform:translateX(0);opacity:1;}
.toast.success{border-color:#A7F3D0;background:#ECFDF5;color:#065F46;}
.toast.error{border-color:#FECACA;background:#FEF2F2;color:#991B1B;}

/* Key-Value block */
.kv{background:var(--triplex-gray-50);border:1px solid var(--triplex-gray-200);border-radius:16px;padding:16px;}
.kv code{background:#fff;border:1px solid var(--triplex-gray-200);padding:2px 6px;border-radius:8px;}

/* Success page */
.screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--triplex-gray-50);}
.box{max-width:560px;width:100%;}
.success-icon{width:84px;height:84px;border-radius:999px;background:var(--triplex-primary);color:#fff;
  display:grid;place-items:center;font-size:40px;font-weight:700;margin:0 auto 16px;position:relative;box-shadow:var(--triplex-shadow-lg);}
.success-ring{position:absolute;inset:-8px;border-radius:999px;border:2px solid var(--triplex-primary);opacity:.25;animation:ripple 1.8s ease-out infinite;}
@keyframes ripple{from{transform:scale(.9);opacity:.25}to{transform:scale(1.25);opacity:0}}
.status{background:var(--triplex-gray-50);border:1px solid var(--triplex-gray-200);border-radius:16px;padding:16px;}
.row{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:4px 0;}
.ok{display:inline-flex;align-items:center;gap:8px;color:var(--triplex-primary);font-weight:700;}
.ok-dot{width:18px;height:18px;border-radius:999px;background:var(--triplex-primary);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.progress-wrap{margin-top:14px}
.bar{height:8px;background:var(--triplex-gray-200);border-radius:999px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--triplex-primary);width:0;animation:load 10s linear forwards;border-radius:inherit}
@keyframes load{from{width:0}to{width:100%}}

/* Setup page */
.page{max-width:760px;margin:32px auto;padding:0 16px;}
.hint{background:#fff;border:1px solid var(--triplex-gray-200);border-radius:16px;padding:16px;margin:18px 0}
.mono{font-family:var(--triplex-font-mono)}
.error{color:#991B1B;background:#FEF2F2;border:1px solid #FECACA;padding:12px;border-radius:12px;margin-top:16px}
textarea.form-textarea-triplex{min-height:100px}

/* Company selection */
.sel-page{max-width:900px;margin:32px auto;padding:0 16px}
.grid{display:grid;gap:12px}
.item{background:var(--triplex-gray-50);border:1px solid var(--triplex-gray-200);
  border-radius:12px;transition:var(--triplex-transition)}
.item:hover{box-shadow:var(--triplex-shadow-lg);transform:translateY(-1px)}
.link{display:block;padding:18px;text-decoration:none;color:var(--triplex-gray-900)}
.name{font-weight:800;color:#0056b3}
.details{font-size:13px;color:var(--triplex-gray-500);margin-top:4px}
.add{display:block;width:100%;text-align:center;margin-top:16px}

/* Small variants for responsiveness */
@media (max-width: 380px){
  .btn-triplex{font-size:14px;padding:11px 14px;}
}

.bg-triplex-primary-light {
    background-color: var(--triplex-primary-light);
}

.border-triplex-primary-light {
    border-color: var(--triplex-primary-light);
}

.hover\:text-triplex-primary-hover:hover {
    color: var(--triplex-primary-hover);
}