/* =========================================================================
 * Botbird for Business - Modern Theme Layer
 * -------------------------------------------------------------------------
 * 既存の Metronic v4 + light_metabirds.css の上に重ねるテーマ層。
 * DOM・JS は無改修で、CSS 変数とコンポーネント上書きのみでブランドをモダン化する。
 * このファイルの <link> を 1 行コメントアウトすれば完全に元に戻る（破壊しない追加変更）。
 * ダークモード対応は射程外。:root で変数化することで将来の対応素地のみ残す。
 * ========================================================================= */

:root {
    /* Brand color tokens */
    --bb-primary:        #2f6fed;
    --bb-primary-hover:  #1f55c4;
    --bb-primary-soft:   #eaf1ff;
    --bb-success:        #1aa971;
    --bb-warning:        #e0a800;
    --bb-danger:         #d9534f;
    --bb-info:           #17a2b8;

    /* Surface tokens */
    --bb-bg:             #f6f8fb;
    --bb-surface:        #ffffff;
    --bb-surface-muted:  #f1f3f7;
    --bb-border:         #e3e7ee;
    --bb-border-strong:  #cdd4df;
    --bb-text:           #1f2937;
    --bb-text-muted:     #6b7280;

    /* Typography */
    --bb-font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI",
                         "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                         "Noto Sans JP", Meiryo, Roboto, "Helvetica Neue",
                         Arial, sans-serif;
    --bb-font-size-base: 14px;
    --bb-line-height:    1.6;

    /* Radius / Shadow / Spacing */
    --bb-radius-sm:      8px;
    --bb-radius-md:      12px;
    --bb-radius-lg:      16px;
    /* 影は彩度を落とし、リングと組み合わせて「浮かせず締める」上品な階層に */
    --bb-shadow-sm:      0 1px 2px rgba(16, 24, 40, 0.04);
    --bb-shadow-md:      0 2px 8px rgba(16, 24, 40, 0.06);
    --bb-shadow-lg:      0 8px 24px rgba(16, 24, 40, 0.08);
    --bb-space-1:        4px;
    --bb-space-2:        8px;
    --bb-space-3:        12px;
    --bb-space-4:        16px;
    --bb-space-5:        24px;
    --bb-space-6:        32px;

    /* 洗練用ニュートラルトークン（アクセント色を散らさず、面と階調で見せる） */
    --bb-surface-subtle: #fafbfc;  /* ほぼ白に近い極薄グレー（ベタ塗りの彩度を避ける） */
    --bb-text-strong:    #111827;  /* 見出し用の濃いインク */
    --bb-hairline:       #eceef2;  /* 区切り線用の極細グレー */
}

/* Base typography polish */
body,
body.page-header-fixed {
    font-family: var(--bb-font-sans);
    background-color: var(--bb-bg);
    color: var(--bb-text);
}

/* Portlet (Metronic card) */
.portlet.light {
    border-radius: var(--bb-radius-md);
    box-shadow: var(--bb-shadow-sm);
    border: 1px solid var(--bb-border);
}
.portlet.light .portlet-title {
    border-bottom-color: var(--bb-border);
}

/* Dashboard KPI cards */
.dashboard-stat2 {
    border-radius: var(--bb-radius-md);
    box-shadow: var(--bb-shadow-sm);
    border: 1px solid var(--bb-border);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dashboard-stat2:hover {
    box-shadow: var(--bb-shadow-md);
    transform: translateY(-1px);
}

/* Buttons */
.btn {
    border-radius: var(--bb-radius-sm);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn.green,
.btn.btn-primary {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
}
.btn.green:hover,
.btn.btn-primary:hover,
.btn.green:focus,
.btn.btn-primary:focus {
    background-color: var(--bb-primary-hover);
    border-color: var(--bb-primary-hover);
}

/* Form controls */
.form-control {
    border-radius: var(--bb-radius-sm);
    border-color: var(--bb-border-strong);
}
.form-control:focus {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px var(--bb-primary-soft);
}

/* Notes / alerts */
.note {
    border-radius: var(--bb-radius-md);
}

/* Tables */
.table > thead > tr > th {
    border-bottom: 2px solid var(--bb-border-strong);
    color: var(--bb-text);
}
.table > tbody > tr > td {
    border-top-color: var(--bb-border);
}

/* Sidebar (subtle polish only) */
.page-sidebar-menu > li > a {
    border-radius: 0;
}
.page-sidebar-menu > li.nav-item.active > a,
.page-sidebar-menu > li.nav-item.active.open > a {
    border-left-color: var(--bb-primary);
}

/* =========================================================================
 * Phase 7: 全ページ共通コンポーネントの形状洗練
 * -------------------------------------------------------------------------
 * ダッシュボード v2 の洗練（ヘアライン境界・控えめな影・大きめ角丸・
 * 余白）を全ページへ波及させる。
 * 方針: 色（ボタンの green/red/blue、font-* アクセント、has-error/success
 * のバリデーション色）は一切変更しない。角丸・影・余白・罫線のみ。
 * ========================================================================= */

/* --- Portlet（カード）: light だけでなく box / 通常 portlet も統一 --- */
.portlet,
.portlet.box,
.portlet.light {
    border-radius: var(--bb-radius-md);
    box-shadow: var(--bb-shadow-sm);
}
/* box 系は色付きヘッダ枠を持つが、外周は柔らかい境界に統一（色は据え置き） */
.portlet.box {
    border: 1px solid var(--bb-hairline);
}
.portlet.light {
    border: 1px solid var(--bb-hairline);
}
/* ポートレットタイトルの下罫線をヘアラインに緩和（色は変えない） */
.portlet.light > .portlet-title,
.portlet > .portlet-title {
    border-bottom-color: var(--bb-hairline);
}

/* --- ボタン: 角丸と過剰な影の除去のみ（色は据え置き） --- */
.btn {
    box-shadow: none;
}
.btn:active,
.btn.active {
    box-shadow: none;
}

/* --- フォーム: 角丸のみ統一（color/border-color は既存ルールに委譲） --- */
.form-control {
    box-shadow: none;
}
.input-group-addon {
    border-radius: var(--bb-radius-sm);
    border-color: var(--bb-border-strong);
}
/* ラベルの太さだけ整える（色は据え置き） */
.form-group > label,
.control-label {
    font-weight: 600;
}

/* --- テーブル: 罫線をヘアラインに緩和し、ヘッダ背景を上品に（文字色据え置き） --- */
.table > thead > tr > th {
    border-bottom-width: 1px;
    border-bottom-color: var(--bb-border-strong);
    background-color: var(--bb-surface-subtle);
    font-weight: 600;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top-color: var(--bb-hairline);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--bb-hairline);
}

/* --- タブ（nav-tabs）: 下線をブランド色の細線に、境界をヘアラインに --- */
.nav-tabs {
    border-bottom-color: var(--bb-hairline);
}
.nav-tabs > li > a {
    border-radius: var(--bb-radius-sm) var(--bb-radius-sm) 0 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-bottom: 2px solid var(--bb-primary);
}

/* --- ノート/アラート: 角丸と境界のみ（色は据え置き） --- */
.note {
    border-radius: var(--bb-radius-md);
}
.alert {
    border-radius: var(--bb-radius-md);
}

/* --- モーダル: 角丸と影を上品に --- */
.modal-content {
    border-radius: var(--bb-radius-lg);
    border: 1px solid var(--bb-hairline);
    box-shadow: var(--bb-shadow-lg);
}
.modal-header {
    border-bottom-color: var(--bb-hairline);
}
.modal-footer {
    border-top-color: var(--bb-hairline);
}

/* --- well / panel など補助コンテナの角丸統一 --- */
.well,
.panel {
    border-radius: var(--bb-radius-md);
}