/* Datei: Speicherbedarf_Smartphone/styles.css
   Nur applet-spezifische Klassen – alles andere kommt aus global.css */

/* Datei: Speicherbedarf_Smartphone/styles.css
   Nur applet-spezifische Klassen – alles andere kommt aus global.css */

/* Applet-Container – analog zur Datenvolumen-App */
.smartphone-storage-app {
   max-width: 800px;
   width: 100%;
   align-items: stretch;
   display: flex;
   flex-direction: column;
   gap: 20px;

   /* Farb-Variablen für Kategorien (für Progress + Legende) */
   --ss-color-os: #d3d3d3;
   /* Betriebssystem */
   --ss-color-systemdata: #a9a9a9;
   /* Systemdaten */
   --ss-color-photosvideos: #ffa500;
   /* Fotos & Videos */
   --ss-color-apps: #ff7f7f;
   /* Apps */
   --ss-color-messages: #ffd700;
   /* Nachrichten */
   --ss-color-music: #32cd32;
   /* Musik */
}

.hinweis {
   max-width: 800px;
}

/* Abschnitte (Zeilen) im Applet */
.smartphone-storage-app__section {
   width: 100%;
}

/* Bereich mit den Eingabefeldern */
.smartphone-storage-app__controls {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.smartphone-storage-app__controls>.form-group:first-child {
   display: flex;
   /* bleibt Flex-Container */
   align-items: center;
   justify-content: center;
   /* Label + Select als Block zentrieren */
   gap: 10px;
   /* kleiner Abstand zwischen Label und Dropdown */
}

/* Trennlinie */
.smartphone-storage-app__divider {
   width: 100%;
}

.smartphone-storage-app__subtitle {
   font-weight: bold;
}

/* Eingabezeilen */
.smartphone-storage-app__row {
   display: flex;
   align-items: center;
   gap: 15px;
}

/* Form-Gruppen benutzen globale Input-Styles, hier nur Layout */
.smartphone-storage-app__row label {
   flex: 1;
}

.smartphone-storage-app__row input[type="number"] {
   flex: 2;
   min-width: 0;
}

/* Speicher-Statusausgabe */
.output {
   font-weight: bold;
   text-align: center;
}

.output.warning {
   color: #ffa500;
   /* Gelb bei fast vollem Speicher */
}

.output.error {
   color: #ff0000;
   /* Rot bei überschrittenem Speicher */
}

/* Blink-Effekt bei überschrittenem Speicher */
.blink {
   animation: smartphone-storage-blinker 1s linear infinite;
}

@keyframes smartphone-storage-blinker {
   50% {
      opacity: 0;
   }
}

/* Fortschrittsbalken und Segmente – analog zur Datenvolumen-App */
.progress-bar {
   width: 100%;
   background-color: #f3f3f3;
   border: 1px solid var(--gray);
   height: 20px;
   border-radius: 5px;
   overflow: hidden;
   display: flex;
}

.progress {
   height: 100%;
   text-align: center;
   color: var(--color-text-inverse);
   white-space: nowrap;
   overflow: hidden;
}

/* Kategorie-Farben – nutzen die CSS-Variablen des App-Containers */
.progress.system {
   background-color: var(--ss-color-os);
}

.progress.systemdata {
   background-color: var(--ss-color-systemdata);
}

.progress.photosvideos {
   background-color: var(--ss-color-photosvideos);
}

.progress.apps {
   background-color: var(--ss-color-apps);
}

.progress.messages {
   background-color: var(--ss-color-messages);
}

.progress.music {
   background-color: var(--ss-color-music);
}

/* Legende – zurück zur Grid-Idee: spaltenweise, bricht sauber um */
.legend {
   margin-top: 0;
   /* optional, falls du keinen Extra-Abstand willst */
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 10px;
   align-items: center;
}

.legend-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.legend-color {
   width: 15px;
   height: 15px;
   border-radius: 50%;
}

.legend-color--os {
   background-color: var(--ss-color-os);
}

.legend-color--systemdata {
   background-color: var(--ss-color-systemdata);
}

.legend-color--photosvideos {
   background-color: var(--ss-color-photosvideos);
}

.legend-color--apps {
   background-color: var(--ss-color-apps);
}

.legend-color--messages {
   background-color: var(--ss-color-messages);
}

.legend-color--music {
   background-color: var(--ss-color-music);
}

/* Schrift im Applet auf kleineren Screens eine Stufe kleiner (optional, analog) */
@media (max-width: 768px) {
   .hinweis {
      font-size: var(--font-size-sm);
   }

   .smartphone-storage-app input,
   .smartphone-storage-app select,
   .smartphone-storage-app button {
      font-size: inherit;
   }

   .smartphone-storage-app input::placeholder {
      font-size: inherit;
   }
}

@media (max-width: 550px) {
   .smartphone-storage-app {
      font-size: var(--font-size-sm);
   }

   .legend {

      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   }
}

@media (max-width: 330px) {

   /* Smartphone-Speicher: Label und Dropdown untereinander */
   .smartphone-storage-app__controls>.form-group:first-child {
      flex-direction: column;
      align-items: center;
   }

   .smartphone-storage-app__controls>.form-group:first-child label,
   .smartphone-storage-app__controls>.form-group:first-child select {
      text-align: center;
   }
}