/* ============================================================
   Materia OS — Styles des applications
   ============================================================ */

/* ================= Fichiers ================= */
.files-app { flex-direction: row !important; }
.files-side {
  width: 176px;
  flex: none;
  padding: 12px 10px;
  border-right: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.files-side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-full);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--on-surface-variant);
  text-align: left;
}
.files-side-item:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.files-side-item.sel { background: var(--secondary-container); color: var(--on-secondary-container); }
.files-side-item .material-symbols-rounded { font-size: 20px; }
.files-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.files-crumbs { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.crumb {
  padding: 6px 10px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 550;
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.crumb:hover { background: color-mix(in srgb, var(--on-surface) 7%, transparent); }
.crumb.last { color: var(--on-surface); }
.crumb-sep { color: var(--outline); font-size: 16px; }

.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
  padding: 14px;
  align-content: start;
}
.fitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px 10px;
  border-radius: var(--r-m);
  transition: background var(--dur-s) var(--ease);
}
.fitem:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.fitem.sel { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.fitem .material-symbols-rounded {
  font-size: 44px;
  color: var(--primary);
  font-variation-settings: 'opsz' 48, 'FILL' 1;
}
.fitem.is-file .material-symbols-rounded { color: var(--tertiary); }
.fitem-name {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.3;
}
.fitem-name input {
  width: 92px;
  border: none;
  outline: 2px solid var(--primary);
  border-radius: 6px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font-size: 12px;
  text-align: center;
  padding: 2px;
}
.files-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 0;
  color: var(--on-surface-variant);
}
.files-empty .material-symbols-rounded { font-size: 54px; opacity: .5; }

/* ================= Notes ================= */
.notes-app { flex-direction: row !important; }
.notes-side {
  width: 230px;
  flex: none;
  border-right: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
}
.notes-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 8px 18px;
}
.notes-side-head h2 { font-size: 16px; font-weight: 650; }
.notes-list { flex: 1; overflow-y: auto; padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.note-item {
  padding: 12px 14px;
  border-radius: var(--r-m);
  text-align: left;
  transition: background var(--dur-s) var(--ease);
}
.note-item:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.note-item.sel { background: var(--primary-container); }
.note-item-title {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-item-prev {
  font-size: 12px;
  color: var(--on-surface-variant);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notes-editor { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.notes-title-in {
  border: none;
  outline: none;
  background: transparent;
  font-size: 21px;
  font-weight: 650;
  padding: 20px 26px 4px;
  color: var(--on-surface);
  font-family: var(--font);
}
.notes-text {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  padding: 12px 26px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--on-surface);
  font-family: var(--font);
  user-select: text;
}
.notes-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--on-surface-variant);
}
.notes-placeholder .material-symbols-rounded { font-size: 58px; opacity: .4; }

/* ================= Calculatrice ================= */
.calc-app { background: var(--surface-container-low); }
.calc-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px 24px 10px;
  gap: 4px;
  min-height: 96px;
  overflow: hidden;
}
.calc-expr {
  font-size: 17px;
  color: var(--on-surface-variant);
  min-height: 22px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc-result {
  font-size: 44px;
  font-weight: 350;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calc-pad {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 16px 16px;
}
.calc-key {
  height: 58px;
  border-radius: var(--r-full);
  font-size: 20px;
  font-weight: 500;
  background: var(--surface-container-high);
  color: var(--on-surface);
  transition: border-radius var(--dur-s) var(--ease), filter var(--dur-s) var(--ease),
              transform var(--dur-s) var(--ease);
  position: relative;
  overflow: hidden;
}
.calc-key:hover { filter: brightness(1.05); }
.calc-key:active { border-radius: var(--r-s); transform: scale(.95); }
.calc-key.op { background: var(--secondary-container); color: var(--on-secondary-container); }
.calc-key.eq { background: var(--primary); color: var(--on-primary); font-size: 24px; }
.calc-key.fn { background: var(--tertiary-container); color: var(--on-tertiary-container); font-size: 16px; }
.calc-hist {
  max-height: 110px;
  overflow-y: auto;
  padding: 4px 20px;
  display: flex;
  flex-direction: column-reverse;
  flex: none;
}
.calc-hist-item {
  font-size: 13px;
  color: var(--on-surface-variant);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calc-hist-item:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }

/* ================= Terminal ================= */
.term-app {
  background: hsl(var(--hue) 18% 8%) !important;
  color: hsl(var(--hue) 25% 88%);
  font-family: var(--mono);
  font-size: 13px;
  padding: 14px 16px;
  overflow-y: auto;
  user-select: text;
  cursor: text;
}
.term-out { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.term-out .t-prim { color: hsl(var(--hue) 80% 75%); }
.term-out .t-ok { color: hsl(150 60% 65%); }
.term-out .t-err { color: hsl(4 85% 72%); }
.term-out .t-dim { color: hsl(var(--hue) 10% 55%); }
.term-line { display: flex; line-height: 1.55; }
.term-prompt { color: hsl(150 60% 65%); white-space: pre; }
.term-in {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  padding: 0;
  caret-color: hsl(var(--hue) 80% 75%);
}

/* ================= Toile (Paint) ================= */
.paint-canvas-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--on-surface) 5%, transparent) 0 25%, transparent 0 50%)
    0 0 / 22px 22px;
}
.paint-canvas-wrap canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.paint-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: transform var(--dur-s) var(--ease);
  flex: none;
}
.paint-swatch:hover { transform: scale(1.15); }
.paint-swatch.sel { border-color: var(--on-surface); box-shadow: 0 0 0 2px var(--surface-container-lowest) inset; }
.paint-size-badge {
  min-width: 30px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}
input[type="color"].paint-picker {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
input[type="color"].paint-picker::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].paint-picker::-webkit-color-swatch { border: none; border-radius: 50%; }

/* ================= Paramètres ================= */
.settings-app { flex-direction: row !important; }
.set-rail {
  width: 200px;
  flex: none;
  padding: 14px 10px;
  border-right: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.set-rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-full);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--on-surface-variant);
  text-align: left;
}
.set-rail-item:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.set-rail-item.sel { background: var(--secondary-container); color: var(--on-secondary-container); }
.set-rail-item .material-symbols-rounded { font-size: 21px; }
.set-page { flex: 1; overflow-y: auto; padding: 26px 30px; min-width: 0; }
.set-page h2 { font-size: 22px; font-weight: 500; margin-bottom: 20px; }
.set-group {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-l);
  padding: 6px;
  margin-bottom: 18px;
}
:root[data-mode="dark"] .set-group { background: var(--surface-container); }
.set-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--r-m);
}
.set-row + .set-row { border-top: 1px solid var(--outline-variant); }
.set-row-txt { flex: 1; min-width: 0; }
.set-row-title { font-size: 14px; font-weight: 550; }
.set-row-sub { font-size: 12.5px; color: var(--on-surface-variant); margin-top: 2px; line-height: 1.45; }
.set-row .material-symbols-rounded.lead { color: var(--primary); font-size: 22px; }

.seg {
  display: flex;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-full);
  overflow: hidden;
}
.seg button {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 550;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  gap: 6px;
}
.seg button + button { border-left: 1px solid var(--outline-variant); }
.seg button.sel { background: var(--secondary-container); color: var(--on-secondary-container); }
.seg button .material-symbols-rounded { font-size: 17px; }

.hue-slider-wrap { padding: 8px 16px 14px; }
.hue-track {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: var(--r-full);
  background: linear-gradient(to right,
    hsl(0 55% 55%), hsl(60 55% 55%), hsl(120 55% 45%), hsl(180 55% 45%),
    hsl(240 55% 60%), hsl(300 55% 55%), hsl(360 55% 55%));
  cursor: pointer;
}
.hue-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: hsl(var(--hue) 55% 55%);
  border: 3px solid var(--surface-container-lowest);
  box-shadow: var(--shadow-2);
}

.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 0 26px;
}
.about-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: boot-pulse 3.2s var(--ease) infinite;
}
.about-logo::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
}
.about-name { font-size: 24px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; }
.about-ver {
  font-size: 12.5px;
  color: var(--on-surface-variant);
  background: var(--surface-container-high);
  padding: 4px 14px;
  border-radius: var(--r-full);
}

/* Dialogue modal simple (utilisé par les apps) */
.mdlg-scrim {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in var(--dur-s) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } }
.mdlg {
  width: min(340px, 86%);
  background: var(--surface-container-high);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow-4);
  animation: ctx-in var(--dur-m) var(--ease-out);
}
.mdlg h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.mdlg p { font-size: 13.5px; color: var(--on-surface-variant); line-height: 1.5; margin-bottom: 18px; }
.mdlg-actions { display: flex; justify-content: flex-end; gap: 8px; }