/*------------------------------------
  CSS RESET
------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*------------------------------------
  SITE HEADER (Logo + Banner)
------------------------------------*/
.site-header {
  width: 100%;
  background: #0a1e3f;           /* deep navy */
}

.header-inner {
  max-width: 1200px;             /* constrain your content */
  margin: 0 auto;
  justify-content: flex-start;
  display: flex;
  height: 80px;                  /* adjust banner height here */
  padding: 0 20px;
}

.header-logo {
  height: 100%;                  /* fill the header height */
  width: auto;
  flex-shrink: 0;
  margin-right: 20px;            /* space between logo & banner */
}

.header-banner {
  height: 100%;                  /* flush-fit the header height */
  width: auto;
  display: block;
}

/*------------------------------------
  MAIN WRAPPER: SIDEBAR + CONTENT
------------------------------------*/
.container {
  display: flex;
  min-height: calc(100vh - 80px); /* full viewport minus header */
}

/*------------------------------------
  SIDEBAR BUTTONS
------------------------------------*/
.sidebar {
  display: flex;
  flex-direction: column;        /* stack buttons vertically */
  width: 200px;
  min-width: 100px;                  /* adjust as needed */
  background: #f5f5f5;           /* light sidebar bg */
  padding: 20px;
}

.auto-style1 {
  display: block;
  width: 100%;                   /* make each button full width */
  margin-bottom: 10px;           /* space between buttons */
}

/*------------------------------------
  MAIN CONTENT AREA
------------------------------------*/
.main-content {
  flex: 1;                       /* take remaining space */
  padding: 20px;
}