/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Admin Layout Styles */

:root {
  --side-bar-width: 232px;
  --sm-side-bar-width: 4rem;
  --header-height: 49px;
  font-size: 16px;
}

#side-bar {
  position: fixed;
  top: 0;
  height: 100vh;
  z-index: 20;
  width: var(--side-bar-width);
}

#side-bar.collapsed {
  width: var(--sm-side-bar-width);
}

#content {
  margin-left: var(--side-bar-width);
  transition: margin-left 0.3s ease-in-out;
}
#content.collapsed {
  margin-left: var(--sm-side-bar-width);
}

#main_content {
  padding-top: 1rem;  /* コンテンツ上部に余白を追加 */
  width: 100%;
}

turbo-frame {
  display: block;
}

g-table {
  grid-template-columns: var(--grid-list-column);

  form {
    display: block;
    grid-template-columns: inherit;
  }
  div {
    display: block;
    grid-template-columns: inherit;
  }
}

.border-b {
  border-block-width: 0;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}