/* Trimatric UI – global variables + base utilities (namespaced: tmx-) */
:root{
  --tmx-bg:#f7f8fc; --tmx-ink:#1f2937; --tmx-muted:#64748b; --tmx-brand:#2c7be5;
  --tmx-card:#ffffff; --tmx-err:#dc2626; --tmx-ok:#16a34a;
  /* dark navy blue (finalized) */
  --tmx-label:#2b2ba1cf;
  --tmx-shadow:0 14px 34px -18px rgba(0,0,0,.25);
  --tmx-ring: rgba(44,123,229,.15);
  --tmx-border:#d1d5db;
  --tmx-glow: 0 0 0 4px rgba(44,123,229,.25);
}

/* ===== Card (namespaced) ===== */
.tmx-card{ background:var(--tmx-card); border-radius:14px; padding:20px; box-shadow:var(--tmx-shadow); overflow:hidden; }
.tmx-card-header{ display:flex; align-items:center; gap:12px; margin-bottom:16px; min-width:0; }
.tmx-logo{ width:40px;height:40px;border-radius:8px;overflow:hidden;flex:0 0 40px; box-shadow:0 6px 16px -8px rgba(44,123,229,.35); border:1px solid #e5e7eb; background:#fff; }
.tmx-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.tmx-title h2{ margin:0; font-size:20px; line-height:1.25; color:var(--tmx-label); font-weight:800; }
.tmx-sub{ color:var(--tmx-muted); font-size:13px; margin-top:4px; }

/* ===== Grid / Form ===== */
.tmx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tmx-row-1{ grid-column:1/-1; }
.tmx-label{ display:block; font-weight:700; margin:0 0 6px; color:var(--tmx-label); }
.tmx-hint{ font-size:12px; color:var(--tmx-muted); margin-top:6px; }
.tmx-err{ color:var(--tmx-err); font-size:12px; margin-top:6px; display:none; }

.tmx-input, .tmx-select{
  width:100%; min-width:0; padding:10px 12px; border:1px solid var(--tmx-border); border-radius:8px; background:#fff;
  outline:none; transition:box-shadow .2s,border .2s; font-size:14px; color:var(--tmx-ink);
}
.tmx-input:focus, .tmx-select:focus{ border-color:var(--tmx-brand); box-shadow:0 0 0 3px var(--tmx-ring); }
.tmx-input[readonly]{ background:#f3f4f6; color:#6b7280; }

/* Date with icon */
.tmx-date-wrap{ position:relative; }
.tmx-date-wrap .tmx-input{ padding-right:40px; }
.tmx-cal-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:6px;background:#eef2ff;color:#334155;
  display:grid;place-items:center;cursor:pointer;
}
.tmx-cal-btn:hover{ background:#e0e7ff; }

/* Radio group (with glow) */
.tmx-radio-group{ display:flex; gap:14px; flex-wrap:wrap; }
.tmx-radio-item{
  display:flex; align-items:center; gap:8px; font-size:14px;
  padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff;
  transition:box-shadow .2s, border-color .2s, background .2s;
}
.tmx-radio-item input{ accent-color:var(--tmx-brand); }
.tmx-radio-item:has(input:checked),
.tmx-radio-item.tmx-active{ border-color:var(--tmx-brand); box-shadow:var(--tmx-glow); background:#f7fbff; }

/* Upload + preview */
.tmx-upload{ border:1px dashed #cbd5e1; border-radius:10px; padding:14px; background:#fafbff; }
.tmx-u-row{ display:flex; gap:16px; flex-wrap:wrap; }
.tmx-u-col{ flex:1 1 260px; min-width:220px; }
.tmx-preview{
  width:120px; height:120px; border-radius:10px; overflow:hidden; background:#e5e7eb;
  display:grid; place-items:center; border:1px solid #e5e7eb; cursor:zoom-in;
}
.tmx-preview img{ max-width:100%; max-height:100%; display:block; }
.tmx-ok{ color:var(--tmx-ok); font-size:12px; margin-top:6px; display:none; }

/* Toaster (global) */
.tmx-toaster{
  position:fixed;top:20px;right:20px;min-width:260px;max-width:320px;padding:12px 16px;border-radius:8px;
  font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;backdrop-filter:blur(6px);
  box-shadow:0 4px 15px rgba(0,0,0,.25);opacity:0;transform:translateX(120%);transition:all .4s ease;z-index:9999;color:#fff;
}
.tmx-toaster.tmx-show{ opacity:1; transform:translateX(0); }
.tmx-toast-success{ background:rgba(40,167,69,.9); }
.tmx-toast-error{ background:rgba(220,53,69,.9); }
.tmx-toast-info{ background:rgba(13,110,253,.9); }
.tmx-toast-warning{ background:#ffc107; color:#000; }

/* Zoom modal shell */
.tmx-zoom-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.6); display:none; align-items:center; justify-content:center; z-index:10000; }
.tmx-zoom-wrap{ background:#0b1220; padding:14px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.4); color:#e5e7eb; max-width:90vw; max-height:85vh; display:flex; flex-direction:column; gap:10px; }
.tmx-zoom-toolbar{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.tmx-zoom-tools{ display:flex; align-items:center; gap:8px; }
.tmx-zoom-tools input[type=range]{ width:180px; }
.tmx-zoom-canvas{ background:#111827; border-radius:8px; overflow:hidden; position:relative; flex:1; min-width:260px; min-height:220px; cursor:grab; }
.tmx-zoom-canvas img{ transform-origin:center center; user-select:none; -webkit-user-drag:none; pointer-events:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); max-width:none; max-height:none; }
.tmx-zoom-close{ background:#ef4444; color:#fff; border:none; border-radius:8px; padding:8px 12px; font-weight:700; cursor:pointer; }
.tmx-zoom-close:hover{ filter:brightness(1.05); }

/* ===== Responsive ===== */
@media (max-width: 992px){ .tmx-grid{ grid-template-columns:1fr; } }
@media (max-width: 600px){
  .tmx-title h2{ font-size:18px; line-height:1.3; white-space:normal; word-break:break-word; }
}
@media (max-width: 380px){
  .tmx-label{ font-size:13px; }
  .tmx-input, .tmx-select{ font-size:13px; }
}