@import "./tokens/01-primitives.css";
@import "./tokens/02-semantic.css";
@import "./tokens/03-components.css";

/* Following BEM motholody : https://alticreation.com/blog/bem-pour-le-css/ */

/*Components in alphabetical order*/

/*********************************/
/************ BUTTON *************/
/*********************************/

.button {
  border-radius: var(--button-radius);
  padding: var(--button-padding-y) var(--button-padding-x);
  border: none;
  transition: all 0.2s ease-in-out;
  display: flex;
  gap: var(--button-gap);
  width: fit-content;
}

.button:disabled, .button.disabled,.button:disabled:hover, .button.disabled:hover {
  background-color: var(--button-bg-disabled);
  border-color: var(--button-bg-disabled);
  opacity: 0.5;
  color: var(--text-dark);
  cursor: default !important;
}

.button.unclickable {
  cursor: default !important;
  pointer-events: none !important;
}
.button .icon-base {
  margin: auto;
}

.button--no-padding { padding: 0 0;}

.button--xs { font-size: var(--text-xs); padding: var(--button-xs-padding-y) var(--button-xs-padding-x);}
.button--sm { font-size: var(--text-sm); padding: var(--button-sm-padding-y) var(--button-sm-padding-x);}
.button--md { font-size: var(--text-md); padding: var(--button-md-padding-y) var(--button-md-padding-x);}
.button--lg { font-size: var(--text-lg); padding: var(--button-md-padding-y) var(--button-md-padding-x);}

.button--x-xs { font-size: var(--text-xs); padding: 0 var(--button-xs-padding-x);}
.button--x-sm { font-size: var(--text-sm); padding: 0 var(--button-sm-padding-x);}
.button--x-md { font-size: var(--text-md); padding: 0 var(--button-md-padding-x);}
.button--x-lg { font-size: var(--text-lg); padding: var(--button-md-padding-y) var(--button-md-padding-x);}


.button-square--xs { font-size: var(--text-sm); padding: var(--button-xs-padding-y) var(--button-xs-padding-x);}
.button-square--sm { font-size: var(--text-md); padding: var(--button-xs-padding-y) var(--button-xs-padding-x);}
.button-square--md { font-size: var(--text-md); padding: var(--button-md-padding-y) var(--button-md-padding-x);}
.button-square--lg { font-size: var(--text-lg); padding: var(--button-md-padding-y) var(--button-md-padding-x);}


.button--primary {
  background-color: var(--button-bg-primary);
  color: var(--button-text-primary);
  border: var(--button-border-primary);
}

.button--primary:hover, .button--primary.active {
  background-color: var(--button-bg-primary-hover);
  color: var(--button-text-primary-hover);
  border: var(--button-border-primary-hover);
}

.button--secondary {
  background-color: var(--button-bg-secondary);
  color: var(--button-text-secondary);
  border: var(--button-border-secondary);
}

.button--secondary:hover, .button--secondary.active {
  background-color: var(--button-bg-secondary-hover);
  color: var(--button-text-secondary-hover);
  border: var(--button-border-secondary-hover);
}

.button--tertiary {
  background-color: var(--button-bg-tertiary);
  color: var(--button-text-tertiary);
}

.button--tertiary:hover {
  background-color: var(--button-bg-tertiary-hover);
  color: var(--button-text-tertiary-hover);
}

.button--danger {
  background-color: var(--bg-action-danger);
  color: var(--text-action-danger);
  border: var(--bg-action-danger);
}

.button--danger:hover, .button--danger.active {
  background-color: var(--bg-action-danger-hover);
  color: var(--text-action-danger-hover);
  border: var(--bg-action-danger-hover);
}

.button-dropdown {
    position: relative;
    display: inline-block;
}

.button-dropdown__menu {
    display: none; /* retiré du flux par défaut */
    position: absolute;
    top: calc(0);
    left: 0;
    z-index: 10;
    background: var(--bg-white);
    border-radius: var(--button-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    padding: var(--button-padding-y) var(--button-padding-y);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease;
    height: fit-content;
    max-height: 400px;
    overflow: auto;
    color: var(--button-text-secondary);
}

.button-dropdown__menu.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*********************************/
/************* CARD **************/
/*********************************/
.ui-card {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding-y) var(--card-padding-x);
  gap: var(--card-gap);
  display: flex;
  flex-direction: column;
}

.ui-card-body {
  gap: var(--card-gap);
  display: flex;
  flex-direction: column;
}

/*********************************/
/************* ICON **************/
/*********************************/

.icon-base {
    display: inline-block;
    transform: scale(1);
    transition: transform 150ms ease;
}

.icon-base.icon-base--hidden {
    transform: scale(0);
}

.anim-icon {
  transition: transform .2s ease-in-out;
}


.icon--primary { color: var(--text-color-on-bg-primary); }
.icon--primary:hover { color: var(--text-color-on-bg-primary-hover); }
.icon--secondary { color: var(--color-secondary);}
.icon--success { color: var(--color-success);}
.icon--warning { color: var(--color-warning);}
.icon--danger { color: var(--color-danger);}
.icon--info { color: var(--color-info);}
.icon--neutral {color: var(--color-neutral);}

.icon-xs { font-size: var(--icon-xs); }
.icon-sm { font-size: var(--icon-sm); }
.icon-md { font-size: var(--icon-md); }
.icon-lg { font-size: var(--icon-lg); }
.icon-xl { font-size: var(--icon-xl); }
.icon-2xl { font-size: var(--icon-2xl); }

/*********************************/
/************* LIST **************/
/*********************************/

.list__item-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    padding: var(--list-padding-md);
    color: var(--list-text-color);
    background-color: var(--list-bg);
    border-bottom: var(--list-border);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.list__item-link:last-child {
    border-bottom: none;
}

.list__item-link:hover,
.list__item-link:focus {
    color: var(--list-text-color-hover);
    background-color: var(--list-bg-hover);
}


.list__item-link:active {
    color: var(--list-text-color-active);
    background-color: var(--list-bg-active);
}

.list__button-link {
    width: 100%;
    padding: var(--list-padding-md);
    border-radius: 0;
}

.list__item {
    width: 100%;
    padding: var(--list-padding-md);
}


/*********************************/
/********* FORM -> BASE **********/
/*********************************/

.form {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap-lg);
}

.form .form__actionButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--grid-gap-md);
}


/**************************************/
/******** FORMFIELD -> GENERIC ********/
/**************************************/

.form-field {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: none;
  border-radius: var(--input-radius);
  padding: var(--input-md-padding-y) var(--input-md-padding-x);
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.form-field__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--input-gap);
}

.form-field__label {

}

.form-field--border {
  /* border: none;
  filter: drop-shadow(1px 1px 2px var(--color-tertiary)); */
  border: var(--input-border-regular);
  border-color: var(--color-tertiary);
}

.form-field::placeholder {
  color: var(--input-text-placeholder);
  font-style: italic;
}

.form-field--disabled, .form-field:disabled {
  color: var(--input-text-disabled);
  background-color: var(--input-bg-disabled );
  cursor: not-allowed;
}

.form-field--success{ color: var(--color-success);  border-color: var(--color-success); }
.form-field--warning{ color: var(--color-warning); border-color: var(--color-warning); }
.form-field--danger{ color: var(--color-danger); border-color: var(--color-danger); font-weight: var(--input-text-bold); }
.form-field--info{ color: var(--color-info); border-color: var(--color-info); }

.form-field--w-full   { width: 100%; }
.form-field--w-large  { width: 30rem; } /* ~480px */
.form-field--w-medium { width: 20rem; } /* ~320px */
.form-field--w-short  { width: 12rem; } /* ~192px */
.form-field--w-fit  { width: fit-content; }

.form-field--w-75  { width: 75%; }
.form-field--w-50 { width: 50%; }
.form-field--w-25  { width: 25%; }

.form-field--no-padding { padding: 0 0;}
.form-field--xs { font-size: var(--text-xs); padding: var(--input-xs-padding-y) var(--input-xs-padding-x);}
.form-field--sm { font-size: var(--text-sm); padding: var(--input-sm-padding-y) var(--input-sm-padding-x);}
.form-field--md { font-size: var(--text-md); padding: var(--input-md-padding-y) var(--input-md-padding-x);}
.form-field--lg { font-size: var(--text-lg); padding: var(--input-md-padding-y) var(--input-md-padding-x);}


/***********************************************/
/********* FORMFIELD -> INPUT & SELECT *********/
/***********************************************/

.select {
  cursor: pointer;
}

.input, .select {
  line-height: normal;
}

.form-field-group {
  display: flex;
  align-items: stretch;
}

.form-field-group__field {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

/* Form group (input + actions)*/
.form-field-group__field .form-field {
  width: 100%;  
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.form-field-group__actions {
  display: flex;
}

.form-field-group__actions .button {
  border: var(--input-border-regular);
  border-color: var(--color-tertiary);
  border-radius: 0;
  border-left: none;

  /* Simule onlyXPadding */
  padding-top: 0;
  padding-bottom: 0;
}

.form-field-group__actions > .button:last-child {
  border-top-right-radius: var(--button-radius);
  border-bottom-right-radius: var(--button-radius);
}

.select:focus, .form-field:focus, .form-field:focus-visible, .form-field-group:focus-within .form-field--border{
  border : var(--input-border-regular ) var(--color-secondary);
  outline: none;
}

/*********************************/
/************* PANNEL ************/
/*********************************/

.pannel ul{
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pannel--card-radius {
  border-radius: var(--surface-radius-inner);
}

.pannel--card-padding {
  padding: var(--space-surface-md) var(--space-surface-md);
}

.pannel-card {
  padding: 0 0;
}

.pannel-card__header {
  background-color: var(--card-bg);
}

.pannel-card__body {
  background-color: var(--bg-white);
}

.pannel-card__body ul a:last-child {
  border-bottom-left-radius: var(--surface-radius-inner);
  border-bottom-right-radius: var(--surface-radius-inner);
}


.pannel--success{ 
  background-color: var(--bg-surface-success);  
  color: var(--text-surface-success);  
  border: var(--border-xs) solid var(--border-surface-success) ;
}

.pannel--warning{ 
  background-color: var(--bg-surface-warning);  
  color: var(--text-surface-warning);  
  border: var(--border-xs) solid var(--border-surface-warning) ;
}

.pannel--danger{ 
  background-color: var(--bg-surface-danger);  
  color: var(--text-surface-danger);  
  border: var(--border-xs) solid var(--border-surface-danger) ;
}

/*********************************/
/************ SECTION ************/
/*********************************/

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
}

.section__title {
  text-transform: uppercase;
  font-weight: var(--text-font-bold);
}

.section__title.title--default { color: var(--text-color-default);}
.section__title.title--muted { color: var(--text-color-default-muted);}

.section__title.title--xs { font-size: var(--text-sm);}
.section__title.title--sm { font-size: var(--text-md);}
.section__title.title--md { font-size: var(--text-lg);}
.section__title.title--lg { font-size: var(--text-xl);}

/*********************************/
/************** STAT *************/
/*********************************/

.stat-wrapper {
  background-color: var(--stat-bg);
  border-radius: var(--stat-radius);
  padding: var(--stat-padding-y) var(--stat-padding-x);
  color: var(--stat-text-color);
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  min-width: 0;
}

.stat-wrapper--accent {
  background-color: var(--stat-accent-bg);
  color: var(--stat-accent-text-color);
}

.stat-wrapper--accent .table__thead{
  background-color: var(--bg-surface-accent);
}

.stat-wrapper--accent .table__th{
  color: var(--text-color-default);
}

.stat__title {
  font-size: var(--text-md);
  font-weight: var(--text-font-bold);
  color: var(--stat-text-muted-color);
}

.stat__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.stat__body .stat__chart-wrapper {
  position: relative;
  flex-grow: 1; 
  width: 100%;
}

/*********************************/
/************** TAB **************/
/*********************************/

.tab ul {
  border-radius: var(--surface-radius-inner);
}

.tab__ul {
  background-color: var(--card-bg);
}

/*********************************/
/************* TABLE *************/
/*********************************/
.ui-table {
  background-color: var(--table-bg);
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  color: var(--text-color-default);
}

.table__wrapper {
    border-radius: var(--table-radius);
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
    width: 100%;
}

.table-single-row tbody tr:nth-child(even) {
    background-color: var(--table-striped-row-2);
}

.table-double-row tbody tr:nth-child(4n + 1),
.table-double-row tbody tr:nth-child(4n + 2) {
    background-color: var(--table-striped-row-1);
}

.table-double-row tbody tr:nth-child(4n + 3),
.table-double-row tbody tr:nth-child(4n + 4) {
    background-color: var(--table-striped-row-2);
}

.table__thead {
    background-color: var(--table-bg-header);
}

.table__th {
  padding: var(--table-padding-y) var(--table-padding-x);
  color: var(--table-text-color-header);
}

.table__td {
  padding: var(--table-padding-y) var(--table-padding-x);
}

.table__detail-row{
    display:none;
}

.table__detail-row.show{
    display:table-row;
}

/*For col sizing table system*/
.col-fixed-xxs  { width: 1px; } /* set to mi */
.col-fixed-xs  { width: 40px; }
.col-fixed-sm  { width: 80px; }
.col-fixed-md  { width: 150px; }
.col-fixed-lg  { width: 200px; }
.col-fixed-xl  { width: 350px; }

/*********************************/
/************** TAG **************/
/*********************************/

.tag {
  border-radius: var(--tag-radius);
  padding: var(--tag-xs-padding);
  border: var(--tag-border);
  display: flex;
  align-items: center;
  gap: var(--tag-gap);
  width: fit-content;
}

.tag a { padding: 0 0; }

.tag--default {
  background-color: var(--tag-bg);
  color: var(--tag-text);
  border-color: var(--tag-text);
}

.tag-button--primary {
  background-color: var(--button-bg-primary-hover);
  color: var(--button-text-primary-hover);
  border: var(--button-border-primary-hover);
}

.tag-button--secondary {
  background-color: var(--button-bg-secondary-hover);
  color: var(--button-text-secondary-hover);
  border: var(--button-border-secondary-hover);
}

.tag-link {
  /* background-color: var(--card-bg); */
  background-color: var(--bg-white);
  border: none;
  border-radius: var(--radius-inner-md);
  box-shadow: var(--shadow-xs);
  padding: 0 0;
  transition: var(--transition-default);
}

.tag-link a {
  color: var(--text-color-default);
  padding: var(--tag-md-padding);
}

.tag-link:hover a {
  color: var(--text-link-hover);
}

.tag--success { color: var(--tag-success); border-color: var(--tag-success);}
.tag--warning { color: var(--tag-warning); border-color: var(--tag-warning);}
.tag--danger { color: var(--tag-danger); border-color: var(--tag-danger); }
.tag--info { color: var(--tag-info); border-color: var(--tag-info); }
.tag--neutral { color: var(--tag-neutral); border-color: var(--tag-neutral); }

.tag--xs, .tag--xs a { font-size: var(--tag-xs); }
.tag--sm, .tag--sm a { font-size: var(--tag-sm); }
.tag--md, .tag--md a { font-size: var(--tag-md); }

/*********************************/
/************* TEXT **************/
/*********************************/

.warning-text {
  color: var(--tag-warning);
  font-weight: bold;
}

.text--success{ color: var(--color-success);}
.text--warning{ color: var(--color-warning); font-weight: var(--input-text-bold);}
.text--danger{ color: var(--color-danger); font-weight: var(--input-text-bold); }
.text--info{ color: var(--color-info); }