/* ============================================================
 * Ahamo Welcome Suite - frontend styles
 * ============================================================ */

/* --- Common: badge --- */
.ahamo-badge { padding: 4px 8px; border-radius: 4px; color: #fff; font-size: 85%; display: inline-block; white-space: nowrap; line-height: 1.2; }
.ahamo-badge.mnp { background-color: #ff5722; }
.ahamo-badge.new { background-color: #4caf50; }

/* ============================================================
 * [ahamo_welcome_wari] - device list table
 * ============================================================ */
.ahamo-wari-container { contain: content; margin: 20px 0; }
.ahamo-wari-container .ahamo-ws-heading {
    display: block;
    font-size: 1.15em;
    font-weight: bold;
    margin: 0 0 8px;
}
.ahamo-wari-container .ahamo-ws-update {
    text-align: right;
    font-size: small;
    margin: 0 0 10px;
}

.ahamo-wari-container .device-thumb {
    width: 60px; height: 60px; aspect-ratio: 1 / 1;
    object-fit: contain; display: block; background-color: #f7f7f7;
}

.ahamo-filter-buttons { display: flex; gap: 10px; margin-bottom: 10px; }
.ahamo-filter-buttons .filter-btn {
    flex: 1; padding: 8px; border: 1px solid #ccc; background-color: #f9f9f9;
    border-radius: 4px; cursor: pointer; font-weight: bold;
    transition: background 0.2s; color: #666;
}
.ahamo-filter-buttons .filter-btn.active {
    background-color: var(--color_htag, #ff9b9b);
    color: #ffffff;
    border-color: var(--color_htag, #ff9b9b);
}

.ahamo-search-box { margin-bottom: 10px; }
.ahamo-search-box input {
    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px;
    box-sizing: border-box; font-size: 16px;
}

#ahamo_list_table thead th { background: var(--color_htag, #f9f9f9); text-align: center !important; }
#ahamo_list_table th, #ahamo_list_table td { vertical-align: middle; }
.ahamo-wari-container .center-align { text-align: center !important; }

.ahamo-wari-container .device-wrapper {
    display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.ahamo-wari-container .device-name-box {
    display: flex; flex-direction: column; gap: 4px;
}
.ahamo-wari-container .device-main-name,
.ahamo-wari-container .device-capacity {
    font-weight: bold; line-height: 1.4; display: block;
    word-break: keep-all; overflow-wrap: anywhere;
    font-size: 17px; color: inherit;
}
.ahamo-wari-container .discount-text { font-size: 18px; font-weight: bold; color: #333; }

.ahamo-wari-container .sp-contract-label { display: none; }
.ahamo-wari-container .pc-only-col { display: table-cell; }

.ahamo-no-result { display: none; text-align: center; }

@media screen and (min-width: 601px) {
    .ahamo-wari-container .device-wrapper { justify-content: flex-start; text-align: left; }
    .ahamo-wari-container .device-name-box { align-items: flex-start; }
}

@media screen and (max-width: 600px) {
    .ahamo-wari-container .pc-only-col { display: none; }
    .ahamo-wari-container .sp-contract-label { display: block; margin-bottom: 4px; }
    #ahamo_list_table th, #ahamo_list_table td { padding: 15px 5px; }
    .ahamo-wari-container .device-wrapper { flex-direction: column; gap: 10px; }
    .ahamo-wari-container .device-thumb { width: 55px; height: 55px; }
    .ahamo-wari-container .device-main-name,
    .ahamo-wari-container .device-capacity { font-size: 16px; }
    #ahamo_list_table th.device-name-cell { width: 55%; }
}

/* ============================================================
 * [ahamo_welcome_vs_simonly] / [ahamo_simcp_schedule]
 * ============================================================ */
.awvs-box { margin: 20px 0; line-height: 1.7; }

.awvs-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.awvs-tab {
    flex: 1 1 auto; padding: 10px; border: 1px solid #ccc;
    background: #f9f9f9; border-radius: 4px; cursor: pointer;
    font-weight: bold; color: #666; font-size: 14px; transition: all 0.2s;
}
.awvs-tab:hover { background: #eee; }
.awvs-tab.active { background: var(--color_htag, #ff9b9b); color: #fff; border-color: var(--color_htag, #ff9b9b); }

.awvs-tablewrap { overflow-x: auto; }
.awvs-table { width: 100%; border-collapse: collapse; }
.awvs-table th,
.awvs-table td { padding: 10px 12px; vertical-align: middle; }
.awvs-table thead th { text-align: center; white-space: nowrap; }
.awvs-table tbody th { text-align: center; }
.awvs-table tbody td { text-align: left; }
.awvs-table tbody tr:nth-child(even) { background: #fafafa; }

.awvs-box .awvs-device-thumb {
    width: 30px; height: 40px; aspect-ratio: 3 / 4;
    object-fit: contain; display: block; flex-shrink: 0;
}
.awvs-box .device-wrapper { display: flex; align-items: center; gap: 10px; }
.awvs-box .awvs-device-name-text { line-height: 1.4; }

.awvs-c-compare { line-height: 1.7; }
.awvs-compare-row { display: block; }
.awvs-compare-label { display: inline-block; margin-right: 4px; color: #555; white-space: nowrap; }
.awvs-compare-value { display: inline-block; }

.awvs-verdict {
    display: block; margin-top: 8px; padding: 4px 0 4px 10px;
    border-left: 4px solid #ccc; font-weight: bold; line-height: 1.4;
}
.awvs-verdict.awvs-verdict-a  { border-left-color: var(--awvs-verdict-a, #e53935); color: var(--awvs-verdict-a, #e53935); }
.awvs-verdict.awvs-verdict-b  { border-left-color: var(--awvs-verdict-b, #1e88e5); color: var(--awvs-verdict-b, #1e88e5); }
.awvs-verdict.awvs-verdict-eq { border-left-color: var(--awvs-verdict-eq, #888888); color: var(--awvs-verdict-eq, #888888); }

/* schedule */
.awvs-sched-box .awvs-sched-note { padding: 10px 14px; background: #fafafa; margin: 0 0 12px; }
.awvs-sched-box .awvs-table thead th { text-align: center; }
.awvs-sched-box .awvs-table tbody th,
.awvs-sched-box .awvs-table tbody td { text-align: center; }
.awvs-sched-box .awvs-table tr.awvs-total { background: #fafafa; }

@media (max-width: 600px) {
    .awvs-box .device-wrapper { flex-direction: column; text-align: center; gap: 4px; }
    .awvs-box .awvs-device-thumb { margin: 0 auto; }
    .awvs-table th,
    .awvs-table td { padding: 8px 6px; }
}