/* ================================================
   bento_delivery Orange Theme
   collection-app カラー & タイポグラフィベース
   ================================================ */

:root {
  --c-primary:      #f97316;
  --c-primary-dark: #ea580c;
  --c-primary-bg:   #ffedd5;
  --c-primary-mid:  #fed7aa;
  --c-body-bg:      #fff7ed;
  --c-text:         #1c1917;
  --c-green:        #16a34a;
  --c-green-bg:     #f0fdf4;
  --c-red:          #dc2626;
  --c-red-bg:       #fee2e2;
  --c-g50:          #fafaf9;
  --c-g100:         #f5f5f4;
  --c-g200:         #e7e5e4;
  --c-g300:         #d6d3d1;
  --c-g400:         #a8a29e;
  --c-g500:         #78716c;
  --c-g600:         #57534e;
  --c-g800:         #1c1917;

  /* タイポグラフィ変数 */
  --c-font-family:  'Noto Sans JP', 'Yu Gothic UI', 'Meiryo UI', 'Meiryo',
                    'Hiragino Kaku Gothic ProN', sans-serif;
  --c-font-base:    15px;
  --c-font-sm:      13px;
  --c-font-md:      15px;
  --c-font-lg:      17px;
  --c-font-xl:      19px;
  --c-line-height:  1.65;
  --c-line-compact: 1.4;
}

/* ================================================
   タイポグラフィ基盤
   ================================================ */

html {
  font-size: var(--c-font-base) !important;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
body.app {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-base) !important;
  line-height: var(--c-line-height) !important;
  color: var(--c-text) !important;
  background-color: var(--c-body-bg) !important;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.01em;
}

/* --- 見出し --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--c-font-family) !important;
  font-weight: 700 !important;
  color: var(--c-g800) !important;
  line-height: var(--c-line-compact) !important;
  letter-spacing: 0.02em;
  margin-bottom: 0.6em;
}

h1 { font-size: calc(var(--c-font-base) * 1.6) !important; }
h2 { font-size: calc(var(--c-font-base) * 1.4) !important; }
h3 { font-size: calc(var(--c-font-base) * 1.2) !important; }
h4, h5, h6 { font-size: var(--c-font-base) !important; }

/* --- 段落・本文 --- */
p {
  font-size: var(--c-font-base) !important;
  line-height: var(--c-line-height) !important;
  color: var(--c-g800) !important;
  margin-bottom: 0.5em;
}

/* --- ラベル --- */
label {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 700 !important;
  color: var(--c-g600) !important;
  letter-spacing: 0.02em;
  line-height: var(--c-line-compact) !important;
}

/* --- 小テキスト・補足 --- */
small, .small, .text-muted {
  font-size: var(--c-font-sm) !important;
  color: var(--c-g500) !important;
}

/* ================================================
   Body / 背景
   ================================================ */

.wrapper,
.bg-light {
  background-color: var(--c-body-bg) !important;
}

/* ================================================
   Sidebar
   ================================================ */

.sidebar {
  background: #292524 !important;
  border-right: 2px solid var(--c-primary) !important;
}

.sidebar-brand {
  background: #1c1917 !important;
  border-bottom: 2px solid var(--c-primary) !important;
  padding: 0.85rem 1rem !important;
  color: #fff !important;
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-md) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

.sidebar .nav-link {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 600 !important;
  color: #d6d3d1 !important;
  padding: 0.85rem 1.25rem !important;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
  line-height: var(--c-line-compact) !important;
}

.sidebar .nav-link:hover {
  background: rgba(234, 88, 12, 0.15) !important;
  color: #fff !important;
  border-left-color: var(--c-primary-mid) !important;
}

.sidebar .nav-link.active {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-left-color: var(--c-primary-dark) !important;
  font-weight: 700 !important;
}

.sidebar .nav-icon {
  color: var(--c-g400) !important;
  line-height: 1 !important;
}

.sidebar .nav-link.active .nav-icon,
.sidebar .nav-link:hover .nav-icon {
  color: #fff !important;
}

.sidebar-toggler {
  background: rgba(234, 88, 12, 0.15) !important;
  border-top: 1px solid rgba(234, 88, 12, 0.3) !important;
}

.sidebar-toggler::before {
  background-color: var(--c-primary-mid) !important;
}

/* ================================================
   Header
   ================================================ */

.header {
  background: #fff !important;
  border-bottom: 2px solid var(--c-primary-bg) !important;
  box-shadow: 0 1px 4px rgba(234, 88, 12, 0.12) !important;
}

.header .nav-link {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 600 !important;
  color: var(--c-g600) !important;
  letter-spacing: 0.02em;
}

.header .nav-link:hover {
  color: var(--c-primary) !important;
}

.header-toggler {
  color: var(--c-primary) !important;
  border-color: var(--c-primary-bg) !important;
}

.header-toggler:hover {
  color: var(--c-primary-dark) !important;
  background-color: var(--c-primary-bg) !important;
}

.header .dropdown-header.bg-light {
  background-color: var(--c-primary-bg) !important;
  color: var(--c-primary-dark) !important;
  font-weight: 700 !important;
  font-size: var(--c-font-sm) !important;
  letter-spacing: 0.03em;
}

.header .dropdown-item {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 500 !important;
  color: var(--c-g800) !important;
}

.header .dropdown-item:hover {
  background-color: var(--c-primary-bg) !important;
  color: var(--c-primary) !important;
}

/* ================================================
   ボタン
   ================================================ */

.btn {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: var(--c-line-compact) !important;
}

.btn-primary {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark) !important;
}

.btn-primary:focus,
.btn-primary:active {
  background-color: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.35) !important;
}

.btn-outline-primary {
  color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--c-primary) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: var(--c-g600) !important;
  border-color: var(--c-g300) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--c-g100) !important;
  color: var(--c-g800) !important;
}

.btn-success {
  background-color: var(--c-green) !important;
  border-color: var(--c-green) !important;
}

.btn-success:hover {
  background-color: #15803d !important;
  border-color: #15803d !important;
}

.btn-danger {
  background-color: var(--c-red) !important;
  border-color: var(--c-red) !important;
}

.btn-lg {
  font-size: var(--c-font-md) !important;
  padding: 0.6rem 1.4rem !important;
}

.btn-sm {
  font-size: 12px !important;
  padding: 0.25rem 0.6rem !important;
}

/* ================================================
   リンク
   ================================================ */

/* !important を外す → ページ固有の color: unset !important が勝てるようにする */
a:not(.nav-link):not(.btn):not(.dropdown-item):not(.header-brand) {
  color: var(--c-primary);
}

a:not(.nav-link):not(.btn):not(.dropdown-item):not(.header-brand):hover {
  color: var(--c-primary-dark);
}

.detele_category,
.edit_category {
  color: var(--c-primary) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 600 !important;
}

/* ================================================
   テーブル
   ================================================ */

.table {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
  color: var(--c-g800) !important;
  line-height: var(--c-line-compact) !important;
}

/* thead th: !important を外しインラインstyle・ページ固有CSSが勝てるようにする */
.table thead th {
  background-color: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary-dark);
  font-weight: 700 !important;
  font-size: var(--c-font-sm) !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0.7rem 0.85rem;
}

/* td padding: !important を外しページ固有CSSが勝てるようにする */
.table tbody td {
  font-size: var(--c-font-sm) !important;
  color: var(--c-g800) !important;
  padding: 0.6rem 0.85rem;
  vertical-align: middle !important;
}

.table tbody tr:hover {
  background-color: var(--c-primary-bg);
}

.table-bordered {
  border-color: var(--c-g200) !important;
}

.table-bordered td,
.table-bordered th {
  border-color: var(--c-g200) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 237, 213, 0.3) !important;
}

/* 数量入力テーブル（顧客登録・編集内のテーブル）*/
.input-table {
  font-size: var(--c-font-sm) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ================================================
   カード
   ================================================ */

.card {
  border: 1px solid var(--c-primary-mid) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(234, 88, 12, 0.08) !important;
}

.card-header {
  background: linear-gradient(135deg, var(--c-primary-bg) 0%, #fff 100%) !important;
  border-bottom: 2px solid var(--c-primary-mid) !important;
  color: var(--c-primary-dark) !important;
  font-family: var(--c-font-family) !important;
  font-weight: 700 !important;
  font-size: var(--c-font-md) !important;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.25rem !important;
}

.card-body {
  background-color: #fff !important;
  padding: 1.5rem !important;
  font-size: var(--c-font-base) !important;
  line-height: var(--c-line-height) !important;
}

/* ================================================
   フォーム
   ================================================ */

.form-control {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-base) !important;
  color: var(--c-text) !important;
  background-color: #fff !important;
  border-color: var(--c-g300) !important;
  line-height: var(--c-line-compact) !important;
  padding: 0.4rem 0.7rem !important;
}

.form-control::placeholder {
  color: var(--c-g400) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 400 !important;
}

.form-control:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.2) !important;
}

.form-control:hover {
  border-color: var(--c-primary-mid) !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--c-g100) !important;
  color: var(--c-g500) !important;
  font-style: italic;
}

.form-group {
  margin-bottom: 1.25rem;
}

/* --- Select2 --- */
.select2-container--default .select2-selection--single {
  border-color: var(--c-g300) !important;
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-base) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-base) !important;
  color: var(--c-text) !important;
  line-height: 34px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.2) !important;
}

.select2-results__option {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-base) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--c-primary) !important;
}

/* ================================================
   アラート
   ================================================ */

.alert {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-base) !important;
  font-weight: 600 !important;
  line-height: var(--c-line-height) !important;
  border-radius: 6px !important;
}

.alert-success {
  background-color: var(--c-green-bg) !important;
  border-color: var(--c-green) !important;
  color: #166534 !important;
}

.alert-danger {
  background-color: var(--c-red-bg) !important;
  border-color: var(--c-red) !important;
  color: #991b1b !important;
}

.alert-warning {
  background-color: #fffbeb !important;
  border-color: #d97706 !important;
  color: #92400e !important;
}

/* ================================================
   スケジュールブロック（顧客登録）
   ================================================ */

.schedule-block {
  border: 1px solid var(--c-primary-mid) !important;
  background: var(--c-primary-bg) !important;
  border-radius: 6px !important;
}

.schedule-block strong {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 700 !important;
  color: var(--c-primary-dark) !important;
  letter-spacing: 0.03em;
}

/* ================================================
   バッジ
   ================================================ */

.badge,
.badge-info,
.badge-success,
.badge-danger,
.badge-warning {
  font-family: var(--c-font-family) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.badge-info   { background-color: var(--c-primary) !important; }
.badge-success { background-color: var(--c-green) !important; }
.badge-danger  { background-color: var(--c-red) !important; }

/* ================================================
   ページネーション
   ================================================ */

.page-link {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
  font-weight: 600 !important;
  color: var(--c-primary) !important;
}

.page-link:hover {
  background-color: var(--c-primary-bg) !important;
  color: var(--c-primary-dark) !important;
}

.page-item.active .page-link {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

/* ================================================
   jQuery UI datepicker
   ================================================ */

.ui-widget,
.ui-datepicker {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
}

.ui-datepicker .ui-datepicker-header {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary-dark) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: var(--c-font-sm) !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  color: #fff !important;
}

.ui-datepicker th {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--c-g600) !important;
}

.ui-datepicker td span.ui-state-default,
.ui-datepicker td a.ui-state-default {
  border-color: transparent !important;
  background: #fff !important;
  color: var(--c-text) !important;
  font-size: 13px !important;
  font-weight: 500;
}

.ui-datepicker td a.ui-state-default:hover {
  background: var(--c-primary-bg) !important;
  color: var(--c-primary) !important;
  font-weight: 700;
}

.ui-datepicker td.ui-datepicker-today a.ui-state-default {
  background: var(--c-primary-mid) !important;
  color: var(--c-primary-dark) !important;
  font-weight: 700;
}

.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-highlight {
  background: var(--c-primary) !important;
  color: #fff !important;
  font-weight: 700;
}

/* ================================================
   フッター
   ================================================ */

.footer {
  background: #fff !important;
  border-top: 1px solid var(--c-primary-bg) !important;
  color: var(--c-g500) !important;
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
}

/* ================================================
   顧客一覧・インデックステーブル用
   ================================================ */

/* 顧客名など重要テキスト */
.customer-name,
td.name {
  font-size: var(--c-font-md) !important;
  font-weight: 600 !important;
  color: var(--c-g800) !important;
}

/* エリア・ルート番号 */
td.route, td.area {
  font-size: var(--c-font-sm) !important;
  font-weight: 700 !important;
  color: var(--c-primary) !important;
}

/* 住所 */
td.address {
  font-size: var(--c-font-sm) !important;
  color: var(--c-g600) !important;
}

/* 数量セル */
td.amount {
  font-size: var(--c-font-md) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* ================================================
   各種補助スタイル
   ================================================ */

.text-warning,
.fw-bold.text-warning {
  color: var(--c-primary) !important;
}

/* ドロップダウン */
.dropdown-menu {
  font-family: var(--c-font-family) !important;
  font-size: var(--c-font-sm) !important;
}

/* チェックボックス・ラジオのラベル */
input[type="checkbox"] + label,
input[type="radio"] + label {
  font-size: var(--c-font-base) !important;
  font-weight: 500 !important;
}

/* テーブル内チェックボックス */
td input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-primary);
}

/* 数値入力フォーカス時 */
input[type="number"]:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(234, 88, 12, 0.2) !important;
}

/* ログインページ */
body.app .login-title,
body.app h2.text-center {
  font-size: var(--c-font-xl) !important;
  font-weight: 700 !important;
  color: var(--c-primary-dark) !important;
  letter-spacing: 0.04em;
}

/* ================================================
   弁当種類カラー（dtype）
   ================================================ */

/* 行レベル（おかず=緑 / 小箱=青 / ダブル=ピンク / ご膳=赤 / ごはん=黄色）
   クラス名はメニュー型マッピングの歴史的経緯のまま */
tr.dtype-black  { background-color: #86efac; } /* おかず → 緑 (green-300) */
tr.dtype-cyan   { background-color: #93c5fd; } /* 小箱 → 青 (blue-300) */
tr.dtype-pink   { background-color: #f9a8d4; } /* ダブル → ピンク (pink-300) */
tr.dtype-red    { background-color: #fca5a5; } /* ご膳 → 赤 (red-300) */
tr.dtype-orange { background-color: #fcd34d; } /* ごはん → 黄色 (yellow-300) */

/* セルレベル（テーマのcolor !importantを上書きするため !important 付き） */
td.dtype-black, th.dtype-black  { background-color: #86efac !important; color: #166534 !important; font-weight: 700 !important; }
td.dtype-cyan,  th.dtype-cyan   { background-color: #93c5fd !important; color: #1e40af !important; font-weight: 700 !important; }
td.dtype-pink,  th.dtype-pink   { background-color: #f9a8d4 !important; color: #9d174d !important; font-weight: 700 !important; }
td.dtype-red,   th.dtype-red    { background-color: #fca5a5 !important; color: #991b1b !important; font-weight: 700 !important; }
td.dtype-orange,th.dtype-orange { background-color: #fcd34d !important; color: #854d0e !important; font-weight: 700 !important; }

/* ================================================
   顧客ステータスバッジ
   ================================================ */

.status-badge-active,
.status-badge-stopped {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  line-height: 1.5;
  white-space: nowrap;
}

.status-badge-active {
  background-color: var(--c-green);
  color: #fff !important;
}

.status-badge-stopped {
  background-color: var(--c-g400);
  color: #fff !important;
}