/* resources/css/filament/admin/theme.css */

/* サイドバーの背景を白に設定 */
.fi-sidebar {
    background-color: #ffffff !important; /* ライトモードの背景を白に */
    /* 必要に応じて右側の境界線の色も調整 */
    /* border-right-color: #e5e7eb !important; /* 例: 薄いグレー */
}


/* サイドバーの背景を白にすると、デフォルトのテキストやアイコンが見えにくくなる可能性があるため、色を調整 */
.fi-sidebar .fi-sidebar-item .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-group .fi-sidebar-group-label {
    color: #374151 !important; /* 例: ダークグレー (Tailwind の gray-700) */
}
.fi-sidebar .fi-sidebar-item .fi-sidebar-item-icon {
    color: #6b7280 !important; /* 例: 少し薄いグレー (Tailwind の gray-500) */
}

/* アクティブなアイテムの背景色や文字色も調整が必要な場合があります */
.fi-sidebar .fi-sidebar-item.fi-active {
    background-color: #f3f4f6 !important; /* 例: Tailwind の gray-100 */
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
     color: #1f2937 !important; /* 例: Tailwind の gray-800 またはプライマリカラー */
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
     color: #1f2937 !important; /* 例: Tailwind の gray-800 またはプライマリカラー */
}


:root {
    --Grey-200: #E5E7EB;
    --Primary-100: #E3DABC;
    --Primary-200: #D5C694;
    --Primary-400: #BA9F43;
    --Primary-500: #AE8D1E;
    --Primary-600: #987A14;
    --Primary-700: #82660A;
}
.border-yellow-400 {
    border-color: var(--Primary-200) !important;
}

.bg-custom-600 {
    background-color: var(--Primary-600) !important;
}

.bg-gray-50 {
    rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.text-custom-600 {
    color: var(--Primary-600) !important;
}

.text-primary-600 {
    color: var(--Primary-600) !important;
}

.fi-btn-label {
    font-weight: 700 !important;
}

.fi-link span {
    font-size: 16px !important;
    font-weight: 400 !important;
}

/*
ログイン画面のスタイル
----------------------------------------------- */
/* fi-simple-mainが子要素に存在するときのみ背景画像 */
.fi-panel-user:has(.fi-simple-main),
.fi-panel-user:has(.first) {
    background-image: url('../../img/bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 入力パネル */
.fi-simple-layout .fi-simple-main,
.fi-simple-layout .fi-section,
.first .fi-section-content {
    position: relative;
    padding: 32px;
    border-radius: 16px !important;
    border: 1px solid var(--Grey-200, #E5E7EB) !important;
    box-shadow: 0px 24px 52px 0px rgba(0, 0, 0, 0.12) !important;
}

.fi-simple-layout .fi-simple-main::before,
.fi-simple-layout .fi-section::before,
.first .fi-section-content::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: calc(183 / 512 * 100%);
    height: 1px;
    background: linear-gradient(to right,
            transparent 0%,
            var(--Primary-400) 20%,
            var(--Primary-400) 80%,
            transparent 100%);
    transform: translateX(-50%);
}

/* ロゴ */
.fi-simple-main .logo, .fi-section .logo {
    width: 173px;
    height: auto;
}

/*
初回登録
----------------------------------------------- */
.first section {
    border: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.first .fi-section-content-ctn {
    border: none !important;
    box-shadow: none !important;
}
.first .fi-section-content svg:nth-of-type(1) {
    width: 173px;
    height: auto;
}

.first .fi-section-content h1 {
    margin-top: 14px !important;
}

/*
クレジットカード登録
----------------------------------------------- */
.credit h1 {
    margin-top: -10px;
}

.credit .text-gray-500 {
    margin-top: .5em !important;
    font-size: 14px !important;
}

/*
チュートリアル
----------------------------------------------- */
.tutorial {
    position: relative;
    padding: 50px 41px 0 46px;
}

.tutorial::before {
    content: none !important;
}

.tutorial .js-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
}

.tutorial figure {
    position: relative;
    width: 100%;
    aspect-ratio: 366 / 229;
}

.tutorial figure img {
    position: absolute;
    inset: 0;
}

.tutorial .swiper-btn {
    display: block;
    text-align: center;
    width: 160px;
    margin: 20px auto 0;
    padding: 8px 1em;
    font-weight: 700;
    color: #fff;
    border-radius: 8px;
    background-color: var(--Primary-600);
}

.tutorial .js-next span {
    font-weight: 700;
}

.swiper {
    position: relative;
}

.swiper h2 {
    margin-top: 20px;
}

.swiper p {
    margin-top: 8px;
}

.tutorial .swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    left: 50% !important;
    transform: translate(-50%, calc(100% + 50px));
}

.tutorial .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 !important;
    opacity: 1;
    background-color: var(--Primary-100);
}

.tutorial .swiper-pagination-bullet-active {
    background-color: var(--Primary-700);
}

/*
TOP
----------------------------------------------- */
aside {
    box-shadow: 20px 4px 54px 0px rgba(0, 0, 0, 0.06) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active {
    border-radius: 8px;
    background-color: var(--Primary-500) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active a {
    background-color: transparent;
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff !important;
}
.fi-sidebar .fi-sidebar-item.fi-active svg {
    fill: #fff;
}

.top-main {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/*
動画, コラム一覧
----------------------------------------------- */
.title1 {
    margin: 8px 0 48px;
}

/*
動画詳細
----------------------------------------------- */
.movie {
    border-radius: 12px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
}

.movie-chapter li {
    border-radius: 8px;
}

/*
コラム詳細
----------------------------------------------- */
.column-toc {
    padding-left: 1em;
    text-indent: -1em;
}