/* Componente reutilizabile — .df-action-btn, .df-toolbar, .df-ic, .df-form-section-title. Depinde de tokens.css. */
/* === Table polish enterprise (scoped la .card pentru a nu afecta
      alte zone) === */
.card table{width:100%;border-collapse:collapse;font-size:.83rem;}
.card table thead th{text-align:left;font-size:.66rem;color:var(--df-text-4);padding:10px 12px;border-bottom:1px solid var(--df-border);font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.card table tbody td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;color:var(--df-text-2);}
.card table tbody tr:last-child td{border-bottom:none;}
.card table tbody tr:hover td{background:rgba(255,255,255,.025);}

/* Filter row în thead (rândul cu inputs pentru filtrare) */
.card table #filterRow th{padding:6px 12px 12px;border-bottom:1px solid var(--df-border);text-transform:none;letter-spacing:0;font-weight:400;}

/* === Empty state enterprise === */
.card .empty{text-align:center;color:var(--df-text-4);padding:40px 20px;font-size:.85rem;}

/* === Card title polish === */
.card-title{font-size:.88rem;font-weight:600;color:var(--df-text);margin-bottom:20px;letter-spacing:.01em;}

/* === Pills — aliniate cu tokens (badge system) === */
.pill{display:inline-block;padding:3px 10px;border-radius:var(--df-radius-md);font-size:.7rem;font-weight:600;letter-spacing:.02em;border:1px solid transparent;white-space:nowrap;}
.pill.admin{background:var(--df-brand-bg);color:var(--df-brand-text);border-color:var(--df-brand-bd);}
.pill.org_admin{background:var(--df-warning-bg);color:#fbbf24;border-color:var(--df-warning-bd);}
.pill.user{background:var(--df-primary-bg);color:var(--df-primary-text);border-color:var(--df-primary-bd);}

/* === Action buttons reutilizabile === */
.df-action-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;font-size:.8rem;background:rgba(255,255,255,.03);border:1px solid var(--df-border-2);border-radius:var(--df-radius-md);color:var(--df-text-2);cursor:pointer;font-weight:500;font-family:inherit;transition:background .15s,border-color .15s,color .15s;text-decoration:none;white-space:nowrap;}
.df-action-btn:hover{background:rgba(255,255,255,.06);border-color:var(--df-border-hover);color:var(--df-text);}
.df-action-btn:active{transform:scale(.98);}
.df-action-btn.primary{background:var(--df-primary-bg);border-color:var(--df-primary-bd);color:var(--df-primary-text);}
.df-action-btn.primary:hover{background:rgba(37,99,235,.22);border-color:var(--df-primary);color:#fff;}
.df-action-btn.success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#86efac;}
.df-action-btn.success:hover{background:rgba(34,197,94,.18);color:#bbf7d0;}
.df-action-btn.warning{background:var(--df-warning-bg);border-color:var(--df-warning-bd);color:#fbbf24;}
.df-action-btn.warning:hover{background:rgba(245,158,11,.2);color:#fde68a;}

/* === Toolbar row — wrapper deasupra tabelelor dacă va fi folosit === */
.df-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.df-toolbar-spacer{flex:1;}

/* === Input placeholder consistent === */
.card input::placeholder,.card select::placeholder{color:var(--df-text-4);}

/* === Th-filter polish === */
.th-filter{width:100%;margin-top:5px;padding:5px 9px;background:rgba(255,255,255,.04);border:1px solid var(--df-border);border-radius:var(--df-radius-sm);color:var(--df-text);font-size:.73rem;outline:none;box-sizing:border-box;font-family:inherit;transition:border-color .15s;}
.th-filter:focus{border-color:var(--df-primary);background:rgba(255,255,255,.06);}
.th-filter::placeholder{color:var(--df-text-4);}

/* === SVG icon helpers === */
.df-ic,.df-ic-lg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle;display:inline-block;}
.df-ic{width:16px;height:16px;}
.df-ic-lg{width:20px;height:20px;}

/* === Section headings cu icon SVG inline === */
.df-section-h2{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;margin-top:32px;margin-bottom:16px;}
.df-section-h2.danger{color:#ffaaaa;}
.df-section-h2.info{color:#9db0ff;}

/* === Form sections (grupare vizuală în formulare lungi) === */
.df-form-section-title{font-size:.68rem;color:var(--df-text-4);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:20px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--df-border);}
.df-form-section-title:first-child{margin-top:0;}

/* === Inline action buttons cu variante semantice === */
.df-inline-action{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:.83rem;background:rgba(255,255,255,.04);border:1px solid var(--df-border-2);border-radius:var(--df-radius-md);color:var(--df-text-2);cursor:pointer;font-weight:500;font-family:inherit;transition:all .15s;text-decoration:none;white-space:nowrap;}
.df-inline-action:hover{background:rgba(255,255,255,.07);border-color:var(--df-border-hover);color:var(--df-text);}
.df-inline-action:active{transform:scale(.98);}
.df-inline-action:disabled{opacity:.5;cursor:not-allowed;}

.df-inline-action.primary{background:var(--df-primary);color:#fff;border-color:var(--df-primary);}
.df-inline-action.primary:hover{background:var(--df-primary-2);border-color:var(--df-primary-2);color:#fff;}

.df-inline-action.brand{background:var(--df-brand-bg);color:var(--df-brand-text);border-color:var(--df-brand-bd);}
.df-inline-action.brand:hover{background:rgba(124,92,255,.22);color:#e0d4ff;}

.df-inline-action.success{background:rgba(34,197,94,.1);color:#86efac;border-color:rgba(34,197,94,.3);}
.df-inline-action.success:hover{background:rgba(34,197,94,.18);color:#bbf7d0;}

.df-inline-action.warning{background:var(--df-warning-bg);color:#fbbf24;border-color:var(--df-warning-bd);}
.df-inline-action.warning:hover{background:rgba(245,158,11,.2);color:#fde68a;}

.df-inline-action.danger{background:var(--df-danger-bg);color:#fca5a5;border-color:var(--df-danger-bd);}
.df-inline-action.danger:hover{background:rgba(239,68,68,.2);color:#fecaca;}

/* === In-page tabs (pentru tab-uri care schimbă view fără reload) === */
.df-pill-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.df-pill-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:999px;border:1px solid var(--df-border-2);background:rgba(255,255,255,.04);color:var(--df-text-3);font-size:.84rem;font-weight:500;cursor:pointer;font-family:inherit;text-decoration:none;transition:background .15s,border-color .15s,color .15s;}
.df-pill-tab:hover{background:rgba(255,255,255,.08);border-color:var(--df-border-hover);color:var(--df-text-2);}
.df-pill-tab.active{background:var(--df-primary-bg);border-color:var(--df-primary-bd);color:var(--df-primary-text);font-weight:600;}

/* === Icon utility classes (sprite /icons.svg) === */
.df-ico{width:16px;height:16px;stroke:currentColor;fill:none;flex-shrink:0;vertical-align:middle;display:inline-block;}
.df-ico-sm{width:14px;height:14px;}
.df-ico-lg{width:20px;height:20px;}
.df-ico-xl{width:24px;height:24px;}

/* === Search input cu icon în stânga === */
.df-search-wrap{position:relative;flex:1;min-width:200px;}
.df-search-wrap .df-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--df-text-4);pointer-events:none;}
.df-search-wrap input[type="search"],.df-search-wrap input.df-search-input{width:100%;padding:9px 14px 9px 38px !important;}

/* === Sub-tabs — underline style, generic/reusable === */
.df-subtabs{display:flex;gap:0;border-bottom:1px solid var(--df-border);margin-bottom:24px;}
.df-subtab{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--df-text-3);font-size:.84rem;font-weight:500;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s;white-space:nowrap;}
.df-subtab:hover{color:var(--df-text-2);}
.df-subtab.active{color:var(--df-primary-text);border-bottom-color:var(--df-primary);font-weight:600;}
.df-subtab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;background:rgba(255,255,255,.08);border-radius:999px;font-size:.68rem;font-weight:600;color:var(--df-text-3);transition:background .15s,color .15s;}
.df-subtab.active .df-subtab-count{background:var(--df-primary-bg);color:var(--df-primary-text);}
.df-subview{display:none;}
.df-subview.active{display:block;}

/* ── Alias .df-ico → moștenește stroke-width/linecap/linejoin ca .df-ic ──
   Rezolvă divergența vizuală temporar, până la consolidarea pe o
   singură clasă în Etapa 6. */
.df-ico,.df-ico-sm,.df-ico-lg,.df-ico-xl{
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ── Variante semantice .df-action-btn (extensie) ──────────────────── */

/* danger — acțiuni distructive/ireversibile (Șterge, Anulează, Refuză) */
.df-action-btn.danger{
  background:rgba(239,68,68,.1);
  border-color:rgba(239,68,68,.3);
  color:#fca5a5;
}
.df-action-btn.danger:hover{
  background:rgba(239,68,68,.18);
  border-color:rgba(239,68,68,.5);
  color:#fecaca;
}

/* cta — gradient brand (1 CTA major per pagină) */
.df-action-btn.cta{
  background:linear-gradient(135deg,rgba(124,92,255,.3),rgba(45,212,191,.25));
  border-color:rgba(124,92,255,.4);
  color:#fff;
  font-weight:600;
}
.df-action-btn.cta:hover{
  background:linear-gradient(135deg,rgba(124,92,255,.45),rgba(45,212,191,.4));
  border-color:rgba(124,92,255,.65);
  box-shadow:0 4px 20px rgba(124,92,255,.25);
}

/* ── Modifiere dimensiune ─────────────────────────────────────────── */

.df-action-btn.sm{
  padding:4px 9px;
  font-size:.72rem;
  gap:4px;
}

.df-action-btn.lg{
  padding:10px 20px;
  font-size:.9rem;
  gap:8px;
}

/* ── Modifiere formă ──────────────────────────────────────────────── */

.df-action-btn.icon-only{
  padding:6px;
  width:32px;
  height:32px;
  justify-content:center;
}
.df-action-btn.icon-only.sm{
  width:26px;
  height:26px;
  padding:4px;
}

.df-action-btn.full-width{
  width:100%;
  justify-content:center;
}

/* ── Scalare SVG în buton — dimensiune auto după variantă ─────────── */

.df-action-btn .df-ic,.df-action-btn .df-ico{width:15px;height:15px;}
.df-action-btn.sm .df-ic,.df-action-btn.sm .df-ico{width:13px;height:13px;}
.df-action-btn.lg .df-ic,.df-action-btn.lg .df-ico{width:18px;height:18px;}