@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #0d0d0d;
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 10%;
    padding-right: 10%;
}
/* ridimensionamento caratteri */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

.header {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* si espande in larghezza */
    padding-bottom: 10px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: auto;
  }
}

.main {
    display: flex;
    flex-grow: 1;
    gap: 16px;
    max-width: 1400px;
    max-height: 590px;
    width: 100%;
    margin: 0 auto;
}

.cont-sidebar {
    flex: 0 1 360px;   /* base 360px, si restringe se serve */
    min-width: 220px;  /* minimo accettabile */
}

.cont-orders {
    position: relative;
    flex: 1;
}

.sidebar {
    font-family: 'Source Code Pro', monospace;
    position: relative;
    width: 100%;
    max-width: 360px;  
    min-width: 220px; 
    max-height: 590px;
    overflow-y: auto;
    background-color: #222;
    border-radius: 5px;
   
}

#orders-data {
    border-radius: 10px;
    width: 100%;
}

/* SEZIONE FOOTER */

footer {
  display: flex;
  min-height: 55px;
  height: 55px; /* fissa l'altezza */
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  color: linen;
  background-color: #0d0d0d; 
  overflow: hidden; /* nasconde overflow se necessario */
}

/* RESPONSIVE RULES */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: auto;
  }

  .main {
    flex-direction: column;
    gap: 10px;
  }

  .cont-sidebar {
    flex: none;
    width: 100%;
  }

  .sidebar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: calc(100vh - 140px);
    order: -1;
    overflow-y: auto;
  }
}