/* =============================
   LICENCES PAGE — THEME V3
   Clean / white / premium
============================= */

.lic-page{
  padding: 20px;
}

/* Header */
.lic-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom: 16px;
  flex-wrap:wrap;
}

.lic-title{
  font-size: 28px;
  color: var(--text-main, #0f172a);
  margin:0;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.lic-subtitle{
  color: var(--text-sub, #64748b);
  font-size: 13px;
  margin:6px 0 0 0;
  font-weight: 700;
}

/* Button */
.lic-btn{
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform .08s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}

.lic-btn:active{ transform: translateY(1px); }

.lic-btn--primary{
  background:#0f172a;
  color:#fff;
  box-shadow: 0 10px 20px rgba(15,23,42,.12);
}
.lic-btn--primary:hover{ opacity:.92; }

/* Alert banner */
.lic-alert{
  display:none; /* JS show */
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #fecdd3;
  background:#fff1f2;
  color:#9f1239;
  font-weight: 900;
  gap:10px;
  align-items:center;
}

.lic-alert i{ margin-right: 8px; }

/* =========================
   KPI (couleurs gardées)
========================= */
.lic-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.lic-kpi{
  background: var(--panel, #fff);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border, #e8eef6);
  box-shadow: var(--shadow-xs, 0 1px 6px rgba(15,23,42,.05));
  border-left: 4px solid #d5ddea;
}

.lic-kpi--amber{  border-left-color:#f59e0b; }
.lic-kpi--red{    border-left-color:#ef4444; }
.lic-kpi--orange{ border-left-color:#fb923c; }
/* petit accent premium indigo si besoin */
.lic-kpi--indigo{ border-left-color:#6366f1; }

.lic-kpi--dark{
  background:#0f172a;
  border-color:#0f172a;
  box-shadow: 0 14px 28px rgba(15,23,42,.18);
}

.lic-kpi__label{
  display:block;
  font-size: 11px;
  font-weight: 900;
  color: var(--text-sub, #64748b);
  text-transform:uppercase;
  letter-spacing: .08em;
}

.lic-kpi__label--dark{ color:#a3b1c6; }

.lic-kpi__value{
  font-size: 26px;
  font-weight: 900;
  color: var(--text-main, #0f172a);
  display:block;
  margin-top: 6px;
  letter-spacing: -0.02em;
}

.lic-kpi__value--profit{ color:#10b981; }

/* =========================
   Filters (SaaS clean)
========================= */
.lic-filters{
  background: var(--panel, #fff);
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border, #e8eef6);
  margin-bottom: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
  box-shadow: var(--shadow-xs, 0 1px 6px rgba(15,23,42,.05));
}

.lic-search{
  flex:2;
  min-width:260px;
  position:relative;
}

.lic-search__icon{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color:#94a3b8;
  font-size:14px;
}

.lic-search__input{
  width:100%;
  padding: 11px 12px 11px 42px;
  border-radius: 14px;
  border: 1px solid var(--border, #e8eef6);
  outline:none;
  font-size:14px;
  font-weight: 700;
  background:#fff;
  color: var(--text-main, #0f172a);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lic-search__input::placeholder{ color:#94a3b8; }

.lic-search__input:focus{
  border-color:#c7d2fe;
  box-shadow: 0 0 0 4px rgba(99,102,241,.10);
}

.lic-select{
  flex:1;
  min-width:220px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border, #e8eef6);
  background:#fff;
  font-size:14px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  outline:none;
  cursor:pointer;

  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right: 34px;
}

.lic-select:focus{
  border-color:#c7d2fe;
  box-shadow: 0 0 0 4px rgba(99,102,241,.10);
}

/* =========================
   Table card
========================= */
.lic-table-card{
  background: var(--panel, #fff);
  border-radius: 16px;
  border: 1px solid var(--border, #e8eef6);
  overflow:hidden;
  box-shadow: var(--shadow-xs, 0 1px 6px rgba(15,23,42,.05));
}

.lic-table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:14px;
}

.lic-table thead tr{
  background:#fafcff;
  border-bottom:1px solid var(--border-2, #eef2f7);
}

.lic-table th{
  padding: 14px 16px;
  font-weight: 900;
  color: var(--text-sub, #64748b);
  white-space:nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.lic-table td{
  padding: 14px 16px;
  border-bottom:1px solid var(--border-2, #eef2f7);
  vertical-align:top;
  color: var(--text-main, #0f172a);
  font-weight: 700;
}

.lic-table tbody tr:hover{
  background:#fbfdff;
}

.lic-th-right{ text-align:right; }

.lic-loading{
  padding: 36px !important;
  text-align:center;
  color:#94a3b8;
  font-weight: 900;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1100px){
  .lic-kpi-grid{ grid-template-columns:repeat(2, 1fr); }
  .licence-layout{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  .lic-page{ padding:16px; }
  .lic-kpi-grid{ grid-template-columns:1fr; }
  .lic-select{ min-width: 100%; }
}

/* Boutons d'action (table licences) */
.lic-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-size: 13px;
  padding: 0;
}

.lic-action-btn--danger{
  border-color: #f1d4d8;     /* soft rose border */
  background: #fff7f8;       /* très léger */
  color: #9f1239;            /* comme ton alert */
}

.lic-action-btn--danger:hover{
  transform: translateY(-2px);
  background: #fff1f2;       /* same family que .lic-alert */
  border-color: #fecdd3;     /* même palette */
  color: #9f1239;
  box-shadow: 0 6px 14px rgba(15,23,42,.08); /* shadow premium neutre */
}

.lic-action-btn--danger:active{
  transform: translateY(1px);
}