/* ═══════════════════════════════════
   Reehor Page Design Center V1 — CSS
   ═══════════════════════════════════ */

/* ── Drawer Overlay & Container ── */
#td-drawer-wrapper { position: fixed; inset: 0; z-index: 99990; }
.td-drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 1; }
.td-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100vw; background: #fff; z-index: 2; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.12); }
.td-drawer.td-mobile-preview { width: 375px; border-radius: 12px 12px 0 0; }
.td-drawer.td-design-mode { border: 2px dashed #4299e1; }

/* ── Header ── */
.td-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #e2e8f0; min-height: 56px; }
.td-drawer-title { font-size: 16px; font-weight: 600; color: #1a202c; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.td-drawer-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.td-drawer-close { background: none; border: none; font-size: 24px; color: #a0aec0; cursor: pointer; padding: 0 4px; line-height: 1; }
.td-drawer-close:hover { color: #4a5568; }

/* ── Design Toolbar ── */
.td-design-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-design-label { font-size: 12px; font-weight: 700; color: #e53e3e; background: #fff5f5; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }

/* ── Tabs ── */
.td-drawer-tabs { display: flex; border-bottom: 1px solid #e2e8f0; background: #f7fafc; }
.td-tab { flex: 1; text-align: center; padding: 12px; font-size: 14px; color: #718096; cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; }
.td-tab:hover { color: #4a5568; background: #edf2f7; }
.td-tab.td-tab-active { color: #2b6cb0; border-bottom-color: #2b6cb0; font-weight: 600; }

/* ── Body ── */
.td-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.td-tab-panel { min-height: 200px; }

/* ── Buttons ── */
.td-btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all .15s; text-decoration: none; }
.td-btn:disabled { opacity: .5; cursor: not-allowed; }
.td-btn-xs { padding: 3px 8px; font-size: 11px; border-radius: 4px; }
.td-btn-sm { padding: 6px 14px; font-size: 13px; }
.td-btn-primary { background: #2b6cb0; color: #fff; }
.td-btn-primary:hover:not(:disabled) { background: #2c5282; }
.td-btn-success { background: #38a169; color: #fff; }
.td-btn-success:hover:not(:disabled) { background: #2f855a; }
.td-btn-danger { background: #e53e3e; color: #fff; }
.td-btn-danger:hover:not(:disabled) { background: #c53030; }
.td-btn-danger-outline { background: #fff; color: #e53e3e; border: 1px solid #e53e3e; }
.td-btn-danger-outline:hover:not(:disabled) { background: #fff5f5; }
.td-btn-outline { background: #fff; color: #4a5568; border: 1px solid #cbd5e0; }
.td-btn-outline:hover:not(:disabled) { background: #f7fafc; }
.td-btn-ghost { background: transparent; color: #718096; }
.td-btn-ghost:hover:not(:disabled) { background: #edf2f7; }
.td-btn-active { background: #2b6cb0; color: #fff; }
.td-btn-block { display: block; width: 100%; margin-top: 8px; padding: 8px 16px; }

/* ── Inputs ── */
.td-input { padding: 8px 12px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; color: #2d3748; background: #fff; transition: border-color .15s; }
.td-input:focus { outline: none; border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66,153,225,.15); }
.td-input:disabled { background: #f7fafc; color: #a0aec0; }
.td-input-date { width: 160px; }

.td-select { width: 200px; appearance: auto; }
.td-select-block { display: block; width: 100%; margin-bottom: 8px; }
.td-textarea { display: block; width: 100%; resize: vertical; min-height: 60px; font-family: inherit; }

/* ── Sections ── */
.td-section { background: #fff; border-radius: 8px; }
.td-section.td-layout-inline { padding: 0; }
.td-section.td-layout-block { padding: 0; }
.td-section.td-layout-two-column { padding: 0; }
.td-design-mode .td-section { border: 1px dashed #cbd5e0; padding: 12px; border-radius: 8px; cursor: grab; transition: all .15s; }
.td-design-mode .td-section:hover { border-color: #4299e1; background: #ebf8ff; }
.td-design-mode .td-section[draggable="true"]:active { cursor: grabbing; }

.td-inline-row { display: flex; align-items: center; gap: 12px; }
.td-block-row { display: flex; flex-direction: column; gap: 8px; }
.td-section-label { font-size: 13px; font-weight: 600; color: #4a5568; min-width: 80px; }
.td-inline-control { display: flex; align-items: center; gap: 8px; flex: 1; }
.td-block-control { display: flex; flex-direction: column; gap: 8px; }

.td-meta-hint { font-size: 12px; color: #a0aec0; margin-top: 4px; }
.td-design-badge { font-size: 11px; color: #e53e3e; background: #fff5f5; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }

/* ── Overview ── */
.td-overview-grid { display: flex; flex-direction: column; gap: 12px; }
.td-overview-row { display: flex; gap: 16px; }
.td-overview-item { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #f7fafc; border-radius: 8px; }
.td-ov-label { font-size: 12px; color: #a0aec0; text-transform: uppercase; letter-spacing: .5px; }
.td-ov-value { font-size: 15px; font-weight: 600; }

/* ── Actions Row ── */
.td-actions-row { display: flex; gap: 12px; }
.td-actions-row .td-btn { flex: 1; padding: 10px 16px; }

/* ── Audit ── */
.td-audit-item { padding: 12px 0; border-bottom: 1px solid #edf2f7; }
.td-audit-item:last-child { border-bottom: none; }
.td-audit-header { display: flex; align-items: center; gap: 12px; }
.td-audit-action { font-weight: 600; color: #2d3748; }
.td-audit-user { color: #718096; font-size: 13px; }
.td-audit-time { color: #a0aec0; font-size: 12px; margin-left: auto; }
.td-audit-detail { margin-top: 6px; font-size: 13px; color: #718096; }
.td-audit-change { display: inline-block; background: #f7fafc; padding: 2px 8px; border-radius: 4px; margin: 2px 4px; font-size: 12px; }
.td-loading,.td-empty,.td-error { text-align: center; padding: 40px 20px; color: #a0aec0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .td-drawer { width: 100% !important; }
  .td-drawer-header { padding: 12px 16px; }
  .td-drawer-body { padding: 16px; }
  .td-inline-row { flex-direction: column; align-items: flex-start; }
  .td-overview-row { flex-direction: column; gap: 8px; }
  .td-actions-row { flex-direction: column; }
}