/* マスター系ページのスタイル */

#children-edit-page,
#children-index-page,
#dosing-times-edit-page,
#dosing-times-index-page,
#enrollment-remark-edit-dialog,
#homes-edit-page,
#homes-index-page,
#meal-rhythms-edit-page,
#meal-rhythms-index-page,
#medical-institutions-edit-page,
#medical-institutions-index-page,
#medicines-edit-page,
#medicines-index-page,
#board-categories-edit-page,
#board-categories-index-page,
#schedule-categories-edit-page,
#schedule-categories-index-page,
#users-edit-page,
#users-index-page,
#user-groups-edit-page,
#user-groups-index-page {
    --primary-color-dark: #4da5d3;
    --primary-color-light: #acd5ea;
}



.g-form-dialog-master .g-form-dialog-header {
    background-color: #4da5d3;
}
.g-form-dialog-master textarea {
    width: 80rem;
    height: 16rem;
}



/*
    ----------------------------------------------
    児一覧
    ----------------------------------------------
*/

#children-index-page :is(.header-row, .row) [data-column="name"],
#children-index-page :is(.header-row, .row) [data-column="home"] {
    width: 24rem;
    line-height: 1.2;
}

#children-index-page :is(.header-row, .row) [data-column="age"] {
    width: 15rem;
}



/*
    ----------------------------------------------
    児登録
    ----------------------------------------------
*/

#children-edit-page .form-panel {
    border-radius: 1rem;
    background-color: white;

    padding: 4rem 6rem 5rem 6rem;
    scroll-margin-top: 9rem;
}

#children-edit-page .form-panel-title {
    position: relative;
    left: -6rem;
    align-self: start;
    padding: 1rem 3rem 0.5rem 4rem;

    border-radius: 0 1rem 1rem 0;
    background-color: var(--primary-color-dark);
}

#children-edit-page input[type="text"],
#children-edit-page input[type="date"],
#children-edit-page select,
:where(#children-edit-page) textarea {
    border-radius: 1rem;
    border: 0.2rem solid #9d9d9d;
    padding: 0.5rem 1rem;

    color: #4d4d4d;
}

#children-edit-page input[type="text"],
#children-edit-page input[type="date"],
#children-edit-page select {
    height: 7rem;

    font-size: 2.5rem;
    font-weight: bold;
}

#children-edit-page input[type="date"] {
    width: 38rem;
}

#children-edit-page textarea {
    width: 107rem;
    height: 16rem;

    font-size: 2rem;
    font-weight: bold;
}

#children-edit-page .relationship-text-field[aria-disabled="true"] {
    /* #disabledStyle (opacity) */
    opacity: 0.4;
}



/* 在籍履歴、食事のリズム履歴のテーブル
   (テーブルやヘッダーに背景がなく、行ごとに背景がつく) */
#children-edit-page .history-table :is(.header-row, .data-row) {
    display: grid;
    /* セル間の間隔は基本的に50pxで、備考・削除間のみ 20px。その他のカラムは右に30pxの余白を持たせる */
    gap: 2rem;
    padding-inline: 2rem;
}
#children-edit-page .history-table .data-row {
    margin-top: 1rem;
    border-radius: 1rem;
    background-color: #ededed;
}
#children-edit-page .history-table .data-row + .data-row {
    /* ヘッダー・ボディ間の余白は10px、データ行の間は20px */
    margin-top: 2rem;
}
#children-edit-page .history-table .data-cell {
    padding-block: 2rem;
}
#children-edit-page .enrollment-history-table :is(.header-row, .data-row) {
    /* 備考・削除以外は30pxの余白を含む */
    grid-template-columns: 30rem repeat(2, 30rem) 1fr 7rem 5rem;
}
#children-edit-page .meal-rhythm-history-table :is(.header-row, .data-row) {
    /* 備考・削除以外は30pxの余白を含む */
    grid-template-columns: 60rem repeat(2, 30rem) 1fr 7rem 5rem;
}



#children-edit-page .relative-edit-panel {
    position: relative;

    padding: 5rem 2rem;
    border-radius: 1rem;
}

#children-edit-page .relative-edit-panel .g-down-angle,
#children-edit-page .relative-edit-panel .g-up-angle {
    width: 3rem;
    height: 3rem;
}

#children-edit-page .relative-edit-panel .g-down-angle path,
#children-edit-page .relative-edit-panel .g-up-angle path {
    stroke: var(--primary-color-dark);
}



/*
    ----------------------------------------------
    食事のリズム
    ----------------------------------------------
*/

#meal-rhythms-edit-page .check-grid .check-label {
    flex: 1;
}



/*
    ----------------------------------------------
    薬品一覧
    ----------------------------------------------
*/

#medicines-index-page .data-cell[data-column="name"] {
    white-space: pre-line;
    word-break: break-all;

    /* #multilineTextOverflowEllipsis */
    max-height: 9rem; /* 2行分の高さ */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: clip;
}



/*
    ----------------------------------------------
    ユーザー一覧
    ----------------------------------------------
*/

#users-index-page .header-row .name,
#users-index-page .row .name,
#users-index-page .header-row .role,
#users-index-page .row .role,
#users-index-page .header-row .login-id,
#users-index-page .row .login-id {
    width: 28rem;
}

#users-index-page .row .name {
    line-height: 1.2;
}

#users-index-page .header-row .enabled,
#users-index-page .row .enabled {
    width: 8rem;
}
#user-groups-edit-page,
#user-groups-index-page {
    --primary-color-dark: #4da5d3;
    --primary-color-light: #acd5ea;
}



/*
    ----------------------------------------------
    ユーザーグループ一覧
    ----------------------------------------------
*/

#user-groups-index-page .header-row .name,
#user-groups-index-page .row .name {
    width: 30rem;
}

#user-groups-index-page .header-row .description,
#user-groups-index-page .row .description {
    flex: 1;
}

#user-groups-index-page .header-cell,
#user-groups-index-page .data-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}



/*
    ----------------------------------------------
    ユーザーグループ登録
    ----------------------------------------------
*/

#user-groups-edit-page .permission-grid {
    overflow-x: auto;
    max-width: 100%;

    font-weight: bold;
    color: #4d4d4d;
}

#user-groups-edit-page .header-cell {
    display: flex;
    align-items: center;

    padding: 1rem 2rem;
    background-color: var(--primary-color-dark);
    font-size: 2.5rem;
    text-align: center;
    color: white;
}

#user-groups-edit-page .header-cell:not(:first-child) {
    border-left: solid 0.2rem #acd5ea;
}

#user-groups-edit-page .data-cell:not(:first-child) {
    border-left: solid 0.2rem #ededed;
}

#user-groups-edit-page .data-cell {
    border-top: solid 0.4rem #ededed;
}

#user-groups-edit-page .data-cell {
    display: flex;
    align-items: center;

    background-color: white;
}

#user-groups-edit-page .header-cell .g-checkbox-container:not([aria-checked="true"]):not([data-readonly]) .check-icon {
    border-color: #acd5ea;
}

#user-groups-edit-page .header-cell[data-kind="check"],
#user-groups-edit-page .data-cell[data-kind="check"],
#user-groups-edit-page .header-cell[data-kind="check-label"],
#user-groups-edit-page .data-cell[data-kind="check-label"] {
    border-left: none;
}

#user-groups-edit-page .header-cell[data-kind="check"],
#user-groups-edit-page .data-cell[data-kind="check"] {
    padding: 0;
}

#user-groups-edit-page .header-cell[data-kind="check-label"],
#user-groups-edit-page .data-cell[data-kind="check-label"] {
    padding-left: 1rem;
}

#user-groups-edit-page .header-cell[data-kind="name"],
#user-groups-edit-page .data-cell[data-kind="name"] {
    padding: 1rem 8rem;
}

#user-groups-edit-page .data-cell[data-kind="name"] {
    font-size: 3rem;
}

#user-groups-edit-page .data-cell[data-kind="name"][data-checked="true"] {
    color: #1eda9b;
}

#user-groups-edit-page .data-cell:nth-child(8n+1),
#user-groups-edit-page .data-cell:nth-child(8n+2),
#user-groups-edit-page .data-cell:nth-child(8n+3),
#user-groups-edit-page .data-cell:nth-child(8n+4) {
    background-color: #fafafa;
}



/*
    ----------------------------------------------
    掲示板カテゴリー
    ----------------------------------------------
*/

#board-categories-index-page [data-column="display-order"]:is(.header-cell, .data-cell) {
    width: 9.6rem;
}

#board-categories-index-page [data-column="name"]:is(.header-cell, .data-cell) {
    min-width: 20rem;
}



/*
    ----------------------------------------------
    予定カテゴリー
    ----------------------------------------------
*/

#schedule-categories-index-page [data-column="display-order"]:is(.header-cell, .data-cell) {
    width: 9.6rem;
}

#schedule-categories-index-page [data-column="name"]:is(.header-cell, .data-cell) {
    width: 24rem;
}