/* ==========================================================
   正進社っぽいテーマ（seishin-scope 内だけ有効）
   ========================================================== */

:root {
    --brand: #0aa7e1; /*メイン青*/
    --brand-dark: #078fbe;
    --brand-soft: #e8f6fd; /* 薄い水色*/
    --bg: #f7fbff; /* 背景*/
    --text: #111827; /*濃い文字*/
    --muted: #6b7280; /* 薄い文字*/
    --border: #e5e7eb;
    --card: #ffffff;
    --radius: 14px;
    --shadow: 0 10px 24px rgba(16,24,40,.08);
    --seishin-header-h: 56px;
}
/* Radzen Header を常に画面幅 */
.seishin-scope .rz-header {
    position: fixed; /* ← 画面上部に固定 */
    top: 0;
    left: 0;
    right: 0; /* ← 横いっぱい */
    width: 100vw;
    height: var(--seishin-header-h);
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.seishin-scope .rz-layout{
  background: #f7fbff !important;
}
.seishin-scope .rz-body {
    background: #f7fbff !important;
    padding-top: var(--seishin-header-h) !important;
    min-height: 100vh;
}
.razomenu{
    background:#e8f6fd
}
/* Sidebar 内側 */
    .seishin-scope .rz-sidebar-content {
    background: transparent !important;
}
/* ページ全体 */
.seishin-scope.seishin-page {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
}

/* メイン領域（必要なら） */
.seishin-scope .seishin-main {
    flex: 1;
    padding: 18px;
}

/* カード系（任意で使うクラス） */
.seishin-scope .seishin-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

/* ==========================================================
   Sidebar（見やすさ最優先）
   ========================================================== */

/* Sidebar 背景を薄めに */
.seishin-scope .rz-sidebar {
    background: #f7fbff; /* ← ほぼ白のブルー */
    border-right: 1px solid #e3edf5 !important;
    box-shadow: none !important;
    padding-top: var(--seishin-header-h) !important;
}

.seishin-scope .rz-sidebar-content {
    padding: 12px 10px;
}

.seishin-scope .not-authorized {
    padding: 14px;
    color: var(--muted);
    font-size: 14px;
}

/* NavMenu（Radzenのナビ想定） */
.seishin-scope .rz-navigation-item {
    margin: 6px 6px;
    border-bottom: none !important; /* 区切り線が強すぎるのを消す */
}

/* リンク本体 */
.seishin-scope .rz-navigation-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px; /* ← 行の高さUPで読みやすく */
    border-radius: 12px;
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    margin-right: 8px;
    background: #ffffff;
    color: #111827;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}

    /* アイコン（沈まない濃さ） */
    .seishin-scope .rz-navigation-item-link i,
    .seishin-scope .rz-navigation-item-link svg {
        font-size: 18px;
        color: #a4b0bd;
    }

    /* ナビ項目の外枠（縦帯の正体）を無効化 */
    .seishin-scope .rz-navigation-item-wrapper {
        background: transparent !important;
    }

    /* hover */
    .seishin-scope .rz-navigation-item-link:hover {
        background: #e6f3fb;
        color: var(--brand-dark);
        transform: translateX(2px);
    }

        .seishin-scope .rz-navigation-item-link:hover i,
        .seishin-scope .rz-navigation-item-link:hover svg {
            color: var(--brand-dark);
        }

    /* Active（選択中）の縦帯の原因を消す：影/グラデ/疑似要素を無効化 */
    .seishin-scope .rz-navigation-item-link.active {
        background: #12a6de !important; /* 単色で固定 */
        background-image: none !important; /* Radzenのグラデを殺す */
        box-shadow: none !important; /* inset影などを殺す */
        filter: none !important; /* もしfilterで濃くしていたら */
    }

        /* もし active に疑似要素（:before/:after）が付いている場合も消す */
        .seishin-scope .rz-navigation-item-link.active::before,
        .seishin-scope .rz-navigation-item-link.active::after {
            content: none !important;
            display: none !important;
        }

        .seishin-scope .rz-navigation-item-link.active i,
        .seishin-scope .rz-navigation-item-link.active svg {
            color: #ffffff;
        }

/* 折りたたみ時（任意） */
.seishin-scope .rz-sidebar-collapsed {
    width: 80px !important;
}

    .seishin-scope .rz-sidebar-collapsed .rz-navigation-item-link {
        justify-content: center;
        padding: 12px;
    }

/* ==========================================================
   Radzen Card / DataGrid
   ========================================================== */
.seishin-scope .grid-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
    /* テーブルが潰れないように */
    .seishin-scope .grid-wrap .rz-data-grid {
        min-width: 900px; /* 列が多い場合は調整 */
    }

.seishin-scope .rz-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

/* DataGrid */
.seishin-scope .rz-datatable,
.seishin-scope .rz-data-grid {
    border-radius: var(--radius) !important;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
}

    .seishin-scope .rz-datatable thead th,
    .seishin-scope .rz-data-grid thead th {
        background: #f3fbff;
        color: #0b5b78;
        font-weight: 800;
        border-bottom: 1px solid var(--border);
    }

    .seishin-scope .rz-datatable tbody td,
    .seishin-scope .rz-data-grid tbody td {
        border-bottom: 1px solid var(--border);
    }

    .seishin-scope .rz-datatable tbody tr:hover,
    .seishin-scope .rz-data-grid tbody tr:hover {
        background: var(--brand-soft);
    }

/* ページャー */
.seishin-scope .rz-paginator {
    border-top: 1px solid var(--border);
    background: #fff;
}

/* ==========================================================
   Radzen Button
   ========================================================== */
.seishin-scope .rz-button-box {
    margin-left: 1px;
    margin-right: 2px;    
}
.seishin-scope .rz-button {
    margin-left: 5px;
    margin-right: 5px;
}

/* アイコンと文字の間隔 */
.seishin-scope .rz-button-icon-left{
  margin-right: 5px;
}
.seishin-scope .rz-button {
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 10px 10px !important;
    border: 1px solid transparent !important;
    transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

    .seishin-scope .rz-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(10,167,225,.18);
    }

    .seishin-scope .rz-button:active {
        transform: translateY(0px);
    }

    /* Primary */
    .seishin-scope .rz-button.rz-primary {
        background: var(--brand) !important;
        color: #fff !important;
    }

        .seishin-scope .rz-button.rz-primary:hover {
            background: var(--brand-dark) !important;
        }

    /* Light/Secondary（白＋青枠） */
    .seishin-scope .rz-button.rz-light,
    .seishin-scope .rz-button.rz-secondary {
        background: #fff !important;
        border-color: var(--brand) !important;
        color: var(--brand-dark) !important;
    }


/* 操作列のボタン間スペース */
.seishin-scope .action-buttons {
    display: flex;
    gap: 8px; /* ← ここで確実に空く */
    justify-content: center;
}

/* ===== Links grid ===== */
.seishin-scope .links-grid {
    display: grid;
    gap: 16px;
    /* 画面幅に応じて自動で横並び */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Card */
.seishin-scope .link-card.rz-card {
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    padding: 14px 14px 12px 14px;
    display: flex;
    flex-direction: column;
}

/* タイトル */
.seishin-scope .link-name {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 6px;
}

/* ヒント */
.seishin-scope .link-hint {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: auto; /* 下のボタンを下に寄せる */
}

/* 下部 */
.seishin-scope .link-actions {
    margin-top: 12px;
}

/* 詳細ボタン */
.seishin-scope .link-btn {
    width: 100%;
    border-radius: 12px;
    font-weight: 800;
}

@media (max-width: 576px) {
    .seishin-scope .rz-textbox,
    .seishin-scope .rz-datepicker input {
        height: 44px; /* 触りやすい */
        font-size: 16px; /* iOSの自動ズーム回避 */
    }

    .seishin-scope .rz-button {
        min-height: 44px;
    }
}

/* ==========================================================
   Mobile responsive (<= 768px)
   - Header fixed + Sidebar off-canvas
   - Prevent "tap not working" by fixing z-index/overlaps
   ========================================================== */

.seishin-scope .rz-header {
    z-index: 1200; /* ヘッダーを最前面に */
    pointer-events: auto; /* 念のため */
}

/* 本文側がはみ出してタップ不能になる事故を減らす */
.seishin-scope .rz-body,
.seishin-scope .seishin-main {
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Tablet/Phone ===== */
@media (max-width: 768px) {

    /* レイアウトの横はみ出し対策 */
    .seishin-scope .rz-layout,
    .seishin-scope .rz-body {
        width: 100%;
        overflow-x: hidden;
    }

    /* サイドバー：画面外に隠す（オフキャンバス） */
    .seishin-scope .rz-sidebar {
        position: fixed !important;
        top: var(--seishin-header-h) !important;
        left: 0 !important;
        height: calc(100dvh - var(--seishin-header-h)) !important;
        width: min(84vw, 320px) !important;
        max-width: 320px !important;
        transform: translateX(-105%);
        transition: transform .18s ease;
        z-index: 1100; /* ヘッダー(1200)より下に */
        padding-top: 0 !important; /* 既存の padding-top を解除（固定化したので不要） */
        box-shadow: 0 10px 24px rgba(16,24,40,.12);
        border-right: 1px solid #e3edf5 !important;
        background: #f7fbff;
    }

        /*
      Radzenの「開いた状態」クラス名が環境で違うことがあるので、
      よくある候補を複数カバーします。
    */
        .seishin-scope .rz-sidebar.rz-sidebar-expanded,
        .seishin-scope .rz-sidebar.rz-sidebar-open,
        .seishin-scope .rz-sidebar.rz-sidebar-responsive,
        .seishin-scope .rz-sidebar.rz-sidebar-visible,
        .seishin-scope .rz-layout.rz-sidebar-expanded .rz-sidebar,
        .seishin-scope .rz-layout.rz-sidebar-open .rz-sidebar {
            transform: translateX(0);
        }

    /* 本文：左右余白を小さく */
    .seishin-scope .seishin-main {
        padding: 12px;
    }

    /* DataGrid：スマホでは最小幅を少し下げる（横スクロールはgrid-wrapで担保） */
    .seishin-scope .grid-wrap .rz-data-grid {
        min-width: 720px;
    }

    /* タップしやすい入力・ボタン（既存576px指定を拡張） */
    .seishin-scope .rz-textbox,
    .seishin-scope .rz-datepicker input,
    .seishin-scope .rz-dropdown,
    .seishin-scope .rz-dropdown .rz-inputtext,
    .seishin-scope .rz-button {
        min-height: 44px;
        font-size: 16px; /* iOSの自動ズーム回避 */
    }

    /* ナビ項目を少し大きく */
    .seishin-scope .rz-navigation-item-link {
        padding: 12px 14px;
        font-size: 15px;
    }
}

/* ===== Small phone (<= 576px) 微調整 ===== */
@media (max-width: 576px) {

    /* カードの余白を少し圧縮 */
    .seishin-scope .rz-card,
    .seishin-scope .seishin-card {
        padding: 12px !important;
    }

    /* links-grid：1列寄せ */
    .seishin-scope .links-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ===== Shipping mobile cards ===== */
.grid-mobile {
    display: none;
}

.grid-desktop {
    display: block;
}

@media (max-width: 768px) {
    .grid-desktop {
        display: none;
    }

    .grid-mobile {
        display: block;
    }
}

/* Card base */
.ship-card {
    background: #fff;
    border: 1px solid #e9f1f8;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(16,24,40,.06);
    padding: 12px;
    margin-bottom: 12px;
}

.ship-card__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ship-card__denpyo {
    font-weight: 900;
    font-size: 15px;
}

.ship-card__date {
    color: #6b7280;
    font-size: 13px;
}

.ship-card__row {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px dashed #eef2f7;
}

    .ship-card__row:first-of-type {
        border-top: none;
    }

.ship-card__row--2col {
    grid-template-columns: 1fr 1fr;
}

    .ship-card__row--2col > div {
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: 8px;
    }

.ship-card__label {
    color: #6b7280;
    font-size: 12px;
}

.ship-card__value {
    font-size: 14px;
    word-break: break-word;
}

.ship-card__link {
    font-weight: 800;
    text-decoration: underline;
}

.ship-card__details {
    margin-top: 10px;
}

.ship-card__summary {
    cursor: pointer;
    font-weight: 800;
    padding: 8px 10px;
    border-radius: 12px;
    background: #e8f6fd;
}

.ship-card__items {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.ship-item {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

.ship-item__name {
    font-weight: 900;
    margin-bottom: 6px;
}

.ship-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #374151;
    font-size: 13px;
}

.ship-item__sub,
.ship-item__comment {
    margin-top: 6px;
    color: #4b5563;
    font-size: 13px;
}

.ship-card__empty {
    padding: 10px;
    color: #6b7280;
}