﻿.purchased-list-status td {
    padding: 34px 16px !important;
    text-align: center !important;
    color: #5f6f82 !important;
    background: #fff !important;
}
.purchased-list-status td.is-empty {
    color: #735f42 !important;
    background: #fffaf2 !important;
}
#downloadPurchasedList {
    cursor: pointer;
}

.purchased-download-status {
    display: inline-block;
    max-width: 320px;
    margin-top: 14px;
    color: #0b5573;
    font-size: 14px;
    line-height: 1.5;
}
#downloadPurchasedList.is-exporting {
    opacity: .55;
    pointer-events: none;
}


/* V1.3 已購書單：作者／演繹人員與內容簡介 */
#DataList td {
    vertical-align: top;
}

.purchased-col-order,
.purchased-order-cell {
    width: 5%;
}

.purchased-col-title {
    width: 20%;
}

.purchased-col-people {
    width: 22%;
}

.purchased-col-intro {
    width: 43%;
}

.purchased-col-action {
    width: 10%;
}

.purchased-title-cell,
.purchased-people-cell,
.purchased-intro-cell {
    padding: 14px 16px !important;
}

.purchased-title-link {
    display: block;
    color: #073b6f;
    font-weight: 700;
    line-height: 1.55;
    text-decoration: none;
}

.purchased-title-link:hover,
.purchased-title-link:focus {
    color: #e75f2d;
    text-decoration: underline;
}

.purchased-content-type {
    display: inline-flex;
    margin-top: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef7fb;
    color: #0b6885;
    font-size: 12px;
    font-weight: 700;
}

.purchased-people {
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1.55;
}

.purchased-person-line {
    overflow-wrap: anywhere;
}

.purchased-person-label {
    color: #6c7885;
    font-size: 13px;
}

.purchased-person-name {
    color: #22384d;
    font-weight: 600;
}

.purchased-no-data {
    color: #8a949d;
}

.purchased-intro-text {
    color: #46586a;
    line-height: 1.65;
    overflow-wrap: anywhere;

    /* 固定顯示四行，超出以省略方式收合。 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-height: 6.6em;
}

.purchased-more-link {
    display: inline-block;
    margin-top: 6px;
    color: #0b6885;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.purchased-more-link:hover,
.purchased-more-link:focus {
    color: #e75f2d;
    text-decoration: underline;
}

.purchased-action-cell {
    white-space: nowrap;
}

@media (max-width: 980px) {
    .TableDiv table,
    .TableDiv thead,
    .TableDiv tbody,
    .TableDiv tr,
    .TableDiv th,
    .TableDiv td {
        display: block;
        width: 100% !important;
    }

    .TableDiv thead {
        display: none;
    }

    #DataList tr {
        margin-bottom: 16px;
        border: 1px solid #d9e2ea;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
    }

    #DataList td {
        border: 0 !important;
        border-bottom: 1px solid #edf1f4 !important;
    }

    #DataList td:last-child {
        border-bottom: 0 !important;
    }

    .purchased-order-cell {
        padding: 8px 14px !important;
        background: #f3f7fa;
        text-align: left !important;
        color: #657789;
    }

    .purchased-action-cell {
        padding: 12px 16px !important;
        text-align: left !important;
    }
}


@media (max-width: 980px) {
    .purchased-intro-text {
        -webkit-line-clamp: 4;
        max-height: 6.6em;
    }
}


/* V1.3.3 已購書單欄寬重整
   覆蓋 default.css 對第 5 欄強制 min-width:500px 的舊規則。 */
.TableDiv .purchased-list-table {
    width: 100% !important;
    min-width: 920px;
    margin: 0 !important;
    table-layout: fixed !important;
}

.TableDiv .purchased-list-table th,
.TableDiv .purchased-list-table td {
    min-width: 0 !important;
    box-sizing: border-box;
}

.TableDiv .purchased-list-table th:nth-child(1),
.TableDiv .purchased-list-table td:nth-child(1),
.purchased-col-order,
.purchased-order-cell {
    width: 4% !important;
}

.TableDiv .purchased-list-table th:nth-child(2),
.TableDiv .purchased-list-table td:nth-child(2),
.purchased-col-title,
.purchased-title-cell {
    width: 18% !important;
    min-width: 0 !important;
}

.TableDiv .purchased-list-table th:nth-child(3),
.TableDiv .purchased-list-table td:nth-child(3),
.purchased-col-people,
.purchased-people-cell {
    width: 30% !important;
}

.TableDiv .purchased-list-table th:nth-child(4),
.TableDiv .purchased-list-table td:nth-child(4),
.purchased-col-intro,
.purchased-intro-cell {
    width: 38% !important;
}

.TableDiv .purchased-list-table th:nth-child(5),
.TableDiv .purchased-list-table td:nth-child(5),
.purchased-col-action,
.purchased-action-cell {
    width: 10% !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: center !important;
}

.purchased-people-cell,
.purchased-intro-cell {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.purchased-action-cell .gotopage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .TableDiv .purchased-list-table {
        min-width: 0;
        table-layout: auto !important;
    }
}


/* V1.3.4 已購書單書目資訊版面重整 */
.TableDiv .purchased-list-table {
    min-width: 980px;
}

.TableDiv .purchased-list-table thead th {
    padding: 13px 12px !important;
    background: #edf2f6 !important;
    color: #173d5f !important;
    font-weight: 800 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.TableDiv .purchased-list-table tbody td {
    padding: 16px 14px !important;
    border-color: #e2e8ed !important;
    background: #fff !important;
}

.TableDiv .purchased-list-table tbody tr:nth-child(even) td {
    background: #fffdf9 !important;
}

.TableDiv .purchased-list-table tbody tr:hover td {
    background: #fff8ed !important;
}

/* 欄寬重新分配：詳細欄不再浪費空間 */
.TableDiv .purchased-list-table th:nth-child(1),
.TableDiv .purchased-list-table td:nth-child(1),
.purchased-col-order,
.purchased-order-cell {
    width: 4% !important;
}

.TableDiv .purchased-list-table th:nth-child(2),
.TableDiv .purchased-list-table td:nth-child(2),
.purchased-col-title,
.purchased-title-cell {
    width: 20% !important;
}

.TableDiv .purchased-list-table th:nth-child(3),
.TableDiv .purchased-list-table td:nth-child(3),
.purchased-col-people,
.purchased-people-cell {
    width: 28% !important;
}

.TableDiv .purchased-list-table th:nth-child(4),
.TableDiv .purchased-list-table td:nth-child(4),
.purchased-col-intro,
.purchased-intro-cell {
    width: 40% !important;
}

.TableDiv .purchased-list-table th:nth-child(5),
.TableDiv .purchased-list-table td:nth-child(5),
.purchased-col-action,
.purchased-action-cell {
    width: 8% !important;
    min-width: 88px !important;
    max-width: 110px !important;
}

.purchased-title-cell {
    vertical-align: top !important;
}

.purchased-title-link {
    font-size: 16px;
    line-height: 1.55;
}

/* 作者／說書人改為角色標籤＋姓名，取消「作者：」文字堆疊 */
.purchased-people {
    display: flex;
    flex-direction: column;
    gap: 9px;
    line-height: 1.55;
}

.purchased-person-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    overflow-wrap: anywhere;
}

.purchased-person-label {
    display: none !important;
}

.purchased-person-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 3px 8px;
    border: 1px solid #c9dce8;
    border-radius: 999px;
    background: #edf7fb;
    color: #0b6684;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.purchased-person-name {
    padding-top: 2px;
    color: #20384f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.purchased-no-data {
    display: inline-block;
    padding: 4px 0;
    color: #89949d;
    font-size: 13px;
}

.purchased-intro-cell {
    vertical-align: top !important;
}

.purchased-intro-text {
    font-size: 14px;
    line-height: 1.7;
    color: #40566a;
    -webkit-line-clamp: 4;
    max-height: 6.8em;
}

.purchased-more-link {
    margin-top: 8px;
    padding-bottom: 1px;
    border-bottom: 1px solid currentColor;
}

.purchased-more-link::after {
    content: " ↗";
}

.purchased-action-cell {
    vertical-align: middle !important;
    text-align: center !important;
    white-space: nowrap;
}

.purchased-action-cell .gotopage {
    min-width: 70px;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

@media (max-width: 1200px) and (min-width: 981px) {
    .TableDiv .purchased-list-table {
        min-width: 900px;
    }

    .purchased-person-line {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 8px;
    }

    .purchased-person-name,
    .purchased-intro-text {
        font-size: 13px;
    }
}

@media (max-width: 980px) {
    .TableDiv .purchased-list-table {
        min-width: 0;
    }

    .purchased-person-line {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .purchased-action-cell {
        text-align: left !important;
        max-width: none !important;
    }
}


/* V1.3.5 主內容防溢出修正
   根因：Flex 內的主內容同時使用 full(100%)，造成「側欄 + 100%」超出視窗。 */
.wrapper2 {
    align-items: flex-start;
}

.purchased-main-content {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.purchased-main-content .TableDiv {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.TableDiv .purchased-list-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* 以 colgroup 作為唯一欄寬來源，避免共用 CSS 把第 5 欄撐成 500px。 */
.purchased-col-order-width {
    width: 4% !important;
}

.purchased-col-title-width {
    width: 20% !important;
}

.purchased-col-people-width {
    width: 28% !important;
}

.purchased-col-intro-width {
    width: auto !important;
}

.purchased-col-action-width {
    width: 96px !important;
}

.TableDiv .purchased-list-table th,
.TableDiv .purchased-list-table td {
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* 取消前版殘留的百分比／最小寬度，交由 colgroup 控制。 */
.TableDiv .purchased-list-table th:nth-child(1),
.TableDiv .purchased-list-table td:nth-child(1),
.TableDiv .purchased-list-table th:nth-child(2),
.TableDiv .purchased-list-table td:nth-child(2),
.TableDiv .purchased-list-table th:nth-child(3),
.TableDiv .purchased-list-table td:nth-child(3),
.TableDiv .purchased-list-table th:nth-child(4),
.TableDiv .purchased-list-table td:nth-child(4),
.TableDiv .purchased-list-table th:nth-child(5),
.TableDiv .purchased-list-table td:nth-child(5) {
    min-width: 0 !important;
    max-width: none !important;
}

.TableDiv .purchased-list-table th:nth-child(5),
.TableDiv .purchased-list-table td:nth-child(5),
.purchased-col-action,
.purchased-action-cell {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center !important;
    overflow: hidden !important;
}

.purchased-action-cell .gotopage {
    min-width: 0 !important;
    max-width: 84px !important;
    padding: 8px 11px !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
}

.purchased-title-cell,
.purchased-people-cell,
.purchased-intro-cell {
    min-width: 0 !important;
    overflow: hidden !important;
}

.purchased-title-link,
.purchased-person-name,
.purchased-intro-text {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* 中型桌面仍完整收在內容區，不產生橫向捲動。 */
@media (max-width: 1280px) and (min-width: 981px) {
    .purchased-main-content {
        padding-left: 18px !important;
        padding-right: 14px !important;
    }

    .purchased-col-title-width {
        width: 19% !important;
    }

    .purchased-col-people-width {
        width: 29% !important;
    }

    .purchased-col-action-width {
        width: 88px !important;
    }

    .TableDiv .purchased-list-table th:nth-child(5),
    .TableDiv .purchased-list-table td:nth-child(5),
    .purchased-col-action,
    .purchased-action-cell {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
    }

    .purchased-action-cell .gotopage {
        max-width: 78px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 980px) {
    .purchased-main-content {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .purchased-main-content .TableDiv {
        overflow: visible !important;
    }

    .TableDiv .purchased-list-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    .purchased-list-table colgroup {
        display: none;
    }

    .TableDiv .purchased-list-table th:nth-child(5),
    .TableDiv .purchased-list-table td:nth-child(5),
    .purchased-col-action,
    .purchased-action-cell {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .purchased-action-cell .gotopage {
        max-width: none !important;
        margin: 0 !important;
    }
}


/* V1.3.6 已購書單搜尋 */
.purchased-search-panel {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 10px 18px;
    align-items: center;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid #d9e4ec;
    border-radius: 14px;
    background: #f7fafc;
    box-sizing: border-box;
}

.purchased-search-label {
    color: #123f63;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.purchased-search-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.purchased-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.purchased-search-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #668093;
    transform: translateY(-50%);
    pointer-events: none;
}

#purchasedSearchKeyword {
    width: 100%;
    height: 46px;
    padding: 8px 14px 8px 43px;
    border: 1px solid #bfcfdb;
    border-radius: 11px;
    background: #fff;
    color: #173d5f;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
}

#purchasedSearchKeyword:focus {
    border-color: #0b6885;
    box-shadow: 0 0 0 3px rgba(11, 104, 133, .13);
}

.purchased-search-button,
.purchased-search-clear {
    min-width: 78px;
    height: 46px;
    padding: 0 17px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.purchased-search-button {
    border: 1px solid #074775;
    background: #074775;
    color: #fff;
}

.purchased-search-button:hover,
.purchased-search-button:focus {
    border-color: #0b5d91;
    background: #0b5d91;
}

.purchased-search-clear {
    border: 1px solid #b8c8d4;
    background: #fff;
    color: #36576e;
}

.purchased-search-clear:hover,
.purchased-search-clear:focus {
    border-color: #e75f2d;
    color: #c94d20;
}

.purchased-search-clear[hidden] {
    display: none !important;
}

.purchased-search-summary {
    grid-column: 2;
    min-height: 20px;
    color: #0b6885;
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 980px) {
    .purchased-search-panel {
        display: block;
        padding: 14px;
    }

    .purchased-search-label {
        display: block;
        margin-bottom: 9px;
    }

    .purchased-search-controls {
        flex-wrap: wrap;
    }

    .purchased-search-input-wrap {
        flex: 1 1 100%;
    }

    .purchased-search-button,
    .purchased-search-clear {
        flex: 1 1 calc(50% - 5px);
    }

    .purchased-search-summary {
        margin-top: 9px;
    }
}


/* V2 已購書單：完整查詢結果與書目欄位 */
.purchased-col-title-width {
    width: 26% !important;
}

.purchased-col-people-width {
    width: 25% !important;
}

.TableDiv .purchased-list-table th:nth-child(2),
.TableDiv .purchased-list-table td:nth-child(2),
.purchased-col-title,
.purchased-title-cell {
    width: 26% !important;
}

.TableDiv .purchased-list-table th:nth-child(3),
.TableDiv .purchased-list-table td:nth-child(3),
.purchased-col-people,
.purchased-people-cell {
    width: 25% !important;
}

.purchased-english-title {
    margin-top: 4px;
    color: #637789;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.purchased-metadata {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed #d9e2e9;
}

.purchased-meta-line {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    font-size: 12px;
    line-height: 1.5;
}

.purchased-meta-label {
    color: #6d7f8e;
    font-weight: 700;
}

.purchased-meta-value {
    color: #344e63;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.purchased-person-intro {
    margin-top: 3px;
    padding-top: 7px;
    border-top: 1px dashed #d9e2e9;
    color: #65798a;
    font-size: 12px;
    line-height: 1.6;
}

.purchased-keywords {
    display: -webkit-box;
    margin-top: 7px;
    color: #6a7f90;
    font-size: 12px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 1280px) and (min-width: 981px) {
    .purchased-col-title-width {
        width: 25% !important;
    }

    .purchased-col-people-width {
        width: 26% !important;
    }

    .TableDiv .purchased-list-table th:nth-child(2),
    .TableDiv .purchased-list-table td:nth-child(2),
    .purchased-col-title,
    .purchased-title-cell {
        width: 25% !important;
    }

    .TableDiv .purchased-list-table th:nth-child(3),
    .TableDiv .purchased-list-table td:nth-child(3),
    .purchased-col-people,
    .purchased-people-cell {
        width: 26% !important;
    }
}

@media (max-width: 980px) {
    .purchased-meta-line {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .TableDiv .purchased-list-table th:nth-child(2),
    .TableDiv .purchased-list-table td:nth-child(2),
    .TableDiv .purchased-list-table th:nth-child(3),
    .TableDiv .purchased-list-table td:nth-child(3),
    .purchased-col-title,
    .purchased-title-cell,
    .purchased-col-people,
    .purchased-people-cell {
        width: 100% !important;
    }
}
