/* Color Variables (claire) */
:root {
  --body-background: #fff; /* Fond clair */
  --calculator: #c0c0c0; /* Calculatrice claire */
  --calculator-shadow: #696969;
  --disp-background: #9EA78C; /* Fond d'écran clair */
  --disp-res-font: black;
  --disp-calc-font: black;
  --disp-wrong-input: #ff6961;
  --disp-scroll-primary: grey;
  --key-primary: #fff;
  --key-operator: #ffb347;
  --key-del: #f08080;
  --key-equ: #77dd77;
  --key-other: #e5e4e2;
  --key-shadow: #808080;
  --key-operator-shadow: #a87022;
  --key-del-shadow: #822c27;
  --key-equ-shadow: #428742;
  --key-other-shadow: #666;
  --histo-scroll-primary: #9EA78C;
  --histo-scroll-secondary: #9EA78C;
  --histo-font-odd: blue;
  --histo-font-even: black;
  --histo-border: grey;
}


/* Basic Html */
body {
  font-family: "Source Sans Pro", sans-serif;
  background-color: var(--body-background);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: background 1.8s;
}

/* Container */
.container {
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  gap: 0px;
}

/* Calculator */
.calculator {
  background-color: var(--calculator);
  position: relative;
  left: 0px;
  padding: 22px;
  width: 210px;
  min-height: auto; /* hauteur minimale ajustée */

  border-radius: 0.8em;
  box-shadow: 0 0.8em 0 0.1em var(--calculator-shadow);
  transition: background 1.8s;
  /* hauteur auto, s’adapte au contenu */
}

/* Calculator : Display */
.display {
  text-align: right;
  padding: 0 8px 0 8px;
  background-color: var(--disp-background);
  box-shadow: 0 2px 2px 3px rgba(0, 0, 0, 0.3) inset;
  box-sizing: border-box;
  border: none;
  height: 70px;
  overflow-x: auto;
  overflow-y: hidden;
  direction: rtl;
  white-space: nowrap;
  word-wrap: break-word;
  transition: 0.8s, background 1.8s;
  scrollbar-color: rgba(0, 0, 0, 0.2) var(--disp-scroll-primary);
  scrollbar-width: thin;
}
#current-calc, #result {
  unicode-bidi: bidi-override;
  direction: ltr;
  transition: color 1.8s;
}
#current-calc {
  font-size: 14px;
  line-height: 30px;
  height: 30px;
  color: var(--disp-calc-font);
  padding-right: 2px;
}
#result {
  font-size: 26px;
  line-height: 34px;
  height: 34px;
  color: var(--disp-res-font);
}
.wrong-value {
  animation-name: wrong-value;
  animation-duration: 0.3s;
  animation-iteration-count: 4;
}
@keyframes wrong-value {
  0% {
    box-shadow: 0 2px 2px 3px rgba(0, 0, 0, 0.3) inset;
  }
  50% {
    box-shadow: 0 2px 2px 4px var(--disp-wrong-input) inset;
  }
  100% {
    box-shadow: 0 2px 2px 3px rgba(0, 0, 0, 0.3) inset;
  }
}

/* Calculator : Scrollbar */
.display::-webkit-scrollbar {
  height: 6px;
}
.display::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
}
.display::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: var(--disp-scroll-primary); 
}

.small_button {
  width:28px;
}

.normal_button {
  width:36px;
}

.large_button {
  width:68px;
}


/* Calculator : Keys */
.row {
  display: flex;
  gap: 10px;
}
.row span {
  line-height: 36px;
  margin-top: 12px;
  text-align: center;
  font-size: 20px;
  background-color: var(--key-primary);
  border-radius: 0.2em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 0 1px var(--key-shadow);
  transition: 0.8s, font-size 0s;
  cursor: pointer;
}
.row span:hover {
  filter: brightness(0.9);
}

/* Classes pour touches, avec couleur et styles propres */
.row span.num {
  background-color: var(--key-primary);
  box-shadow: 0 4px 0 1px var(--key-shadow);
}
.row span.num:active, .row span.num.active {
  transition: 0.08s;
  box-shadow: 0 2px 0 1px var(--key-shadow) inset;
  font-size: 18px;
}

.row span.operator {
  background-color: var(--key-operator);
  box-shadow: 0 4px 0 1px var(--key-operator-shadow);
}
.row span.operator:active, .row span.operator.active {
  transition: 0.08s;
  box-shadow: 0 2px 0 1px var(--key-operator-shadow) inset;
  font-size: 18px;
}

#del {
    background-color: var(--key-del);
    box-shadow: 0 4px 0 1px var(--key-del-shadow);
}
#del:active, #del.active {
  transition: 0.08s;
  box-shadow: 0 2px 0 1px var(--key-del-shadow) inset;
  font-size: 18px;
}

#equ {
  background-color: var(--key-equ);
  box-shadow: 0 4px 0 1px var(--key-equ-shadow);
}
#equ:active, .#equ.active {
  transition: 0.08s;
  box-shadow: 0 2px 0 1px var(--key-equ-shadow) inset;
  font-size: 18px;
}

.row span.other {
  background-color: var(--key-other);
  box-shadow: 0 4px 0 1px var(--key-other-shadow);
}
.row span.other:active, .row span.other.active {
  transition: 0.08s;
  box-shadow: 0 2px 0 1px var(--key-other-shadow) inset;
  font-size: 18px;
}



/*1/x*/
#inverse {
  font-size: 12pt;
}

/* line_sup buttons styling */
.row span.line_sup {
  font-size: 12pt;
  cursor: pointer;
  user-select: none;
  background-color: #e0e0e0;
  border-radius: 4px;
  border: 1px solid #bbb;
  color: #333;
  transition: background-color 0.3s;
  line-height: 24px;
}


/* History */
.histo-calcul {
  margin-top: 22px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 11px;
  width:210px;
  height: 200px;
  overflow-y: auto;
  border-radius: 0.8em;
  border: 1px solid var(--histo-border);
  padding: 6px 12px 6px 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--histo-font-even);
  box-shadow: inset 0 0 4px 1px var(--histo-border);
  background: linear-gradient(180deg, var(--histo-scroll-primary) 0%, var(--histo-scroll-secondary) 100%);
  scrollbar-color: var(--histo-scroll-primary) var(--histo-scroll-secondary);
  scrollbar-width: thin;
  user-select: none;
}
.histo-calcul span {
  display: block;
  padding-left: 4px;
  margin: 4px 0;
}
.histo-calcul span:nth-child(2n) {
  font-weight: 800;
  color: var(--histo-font-odd);
  text-align: right;
}

/* Scrollbar History */
.histo-calcul::-webkit-scrollbar {
  width: 6px;
}
.histo-calcul::-webkit-scrollbar-track {
  background-color: var(--histo-scroll-secondary);
}
.histo-calcul::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: var(--histo-scroll-primary);
}


/* Stats */
.stats-summary {
  margin-top: 11px;
  margin-left: auto;
  margin-right: auto;
  width:210px;
  height: 30px;
  overflow-y: auto;
  border-radius: 0.8em;
  border: 1px solid var(--histo-border);
  padding: 6px 12px 6px 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--histo-font-even);
  box-shadow: inset 0 0 4px 1px var(--histo-border);
  background: linear-gradient(180deg, var(--histo-scroll-primary) 0%, var(--histo-scroll-secondary) 100%);
  scrollbar-color: var(--histo-scroll-primary) var(--histo-scroll-secondary);
  scrollbar-width: thin;
  user-select: none;
}
.stats-summary span {
  display: block;
  padding-left: 4px;
  margin: 4px 0;
}