/*
 * 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.
 */

/*
 * Bootstrap 5.3 theme overrides.
 * Root-level variables (font, radius, shadow, primary color) cascade into components
 * automatically, but a few components bake their own colors into local custom
 * properties at build time and need an explicit override to pick up the accent color.
 */
:root {
  --bs-body-font-family: "Noto Sans JP", var(--bs-font-sans-serif);
  --bs-body-font-size: 0.875rem;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
  --bs-box-shadow-sm: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.06);

  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-focus-ring-color: rgba(79, 70, 229, 0.25);
}

.btn-primary {
  background: linear-gradient(135deg, #495057, #343a40);
  border-color: transparent;
  --bs-btn-focus-shadow-rgb: 73, 80, 87;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(135deg, #495057, #343a40);
  border-color: transparent;
  filter: brightness(0.92);
}

.btn-outline-primary {
  --bs-btn-color: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-disabled-color: #495057;
  --bs-btn-disabled-border-color: #495057;
  --bs-btn-focus-shadow-rgb: 73, 80, 87;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background: linear-gradient(135deg, #495057, #343a40);
  border-color: transparent;
  color: #fff;
}

.form-control:focus,
.form-select:focus {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}

.form-check-input:checked {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.form-check-input:focus {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}

.nav-pills .nav-link.active,
.dropdown-item.active,
.page-item.active .page-link {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.page-link {
  color: #4f46e5;
}

.app-sidebar .sidebar-menu .nav-link {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.app-sidebar .sidebar-menu .nav-link p {
  font-size: 1.0625rem;
  font-weight: 500;
  margin-bottom: 0;
}

.app-sidebar .sidebar-menu .nav-icon {
  min-width: 1.75rem;
  max-width: 1.75rem;
  font-size: 1.1rem;
}

.app-sidebar .brand-text {
  font-size: 1.05rem;
}

/*
 * AdminLTE's default content padding (0.5rem) and table cell padding (0.5rem)
 * read as cramped once real content/tables are in place. Give pages, buttons,
 * and table rows more breathing room.
 */
.app-content-header {
  padding: 1.5rem 1.5rem 0.5rem;
}

.app-content {
  padding: 0.5rem 1.5rem 1.5rem;
}

.btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.875rem;
}

.form-control,
.form-select,
.input-group-text {
  font-size: 0.875rem;
}

.table > :not(caption) > * > * {
  padding: 0.75rem 1rem;
}

/*
 * Bootstrap's heading/fs-* utilities scale with viewport width (vw), so on a
 * wide desktop screen they render noticeably larger than their nominal rem
 * size. Pin them to flat values for a more compact, consistent admin UI.
 * (Sidebar text is set separately above and is intentionally left alone.)
 */
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

.fs-1 { font-size: 2rem !important; }
.fs-2 { font-size: 1.75rem !important; }
.fs-3 { font-size: 1.5rem !important; }
.fs-4 { font-size: 1.25rem !important; }
.fs-5 { font-size: 1.125rem !important; }
.fs-6 { font-size: 1rem !important; }

/*
 * Chat threads (manager/owner) intentionally break from the app-wide
 * "no rounded corners" rule to read as a familiar LINE-style conversation.
 * This is a scoped exception, not a change to the global radius tokens.
 */
.chat-panel {
  background-color: #f1f2f5;
}

.chat-bubble {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 1.1rem;
  word-break: break-word;
}

.chat-bubble p {
  margin-bottom: 0.25rem;
}

.chat-bubble p:last-child {
  margin-bottom: 0;
}

.chat-bubble-own {
  background-color: #4f46e5;
  color: #fff;
  border-bottom-right-radius: 0.3rem;
}

.chat-bubble-other {
  background-color: #fff;
  border: 1px solid #e2e4e8;
  border-bottom-left-radius: 0.3rem;
}

.chat-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: #ced4da;
  color: #495057;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.chat-input {
  border-radius: 1.25rem;
  resize: none;
}

.chat-send-btn {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}