/* style.css */
/* Optimized for 960x540 TV Browser environment */
/* Conforming to CSS1 & CSS2 specs (No flexbox, no grid, no rounded corners, no box-shadows) */
/* Absolutely NO box-sizing: border-box (All width/height manually calculated) */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    font-family: "IPAGothic", "Hiragino Kaku Gothic ProN", "MS Gothic", sans-serif;
    color: #e2e8f0;
}

/* TV Frame Centering / PC Emulation mode class */
body.tv-emulated {
    overflow: auto;
}
body.tv-emulated .tv-container {
    top: 50%;
    left: 50%;
    margin-top: -270px;
    margin-left: -480px;
}

/* Default: Safe left-top positioning for physical TV browser */
/* Width: 960px - 8px border = 952px */
/* Height: 540px - 8px border = 532px */
.tv-container {
    width: 952px;
    height: 532px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #0c1220;
    border: 4px solid #1e293b;
}

/* Header Section */
/* Width: 960px - 40px padding = 920px */
/* Height: 60px - 3px border-bottom = 57px */
.tv-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 920px;
    height: 57px;
    background-color: #162032;
    border-bottom: 3px solid #d97706;
    padding: 0 20px;
}

.header-title {
    float: left;
    font-size: 22px;
    font-weight: bold;
    line-height: 57px;
    color: #ffffff;
}

.header-clock {
    float: right;
    font-size: 20px;
    line-height: 57px;
    color: #ffd700;
    font-weight: bold;
}

/* Base Panel Styles */
/* Width is auto, fills col width */
.panel {
    background-color: #1e293b;
    border: 2px solid #334155;
    padding: 12px;
}

.panel-title {
    font-size: 15px;
    font-weight: bold;
    color: #ffd700;
    border-bottom: 1px solid #475569;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/* 2-Column Positioning */
.col-left {
    position: absolute;
    top: 75px;
    left: 20px;
    width: 450px;
    height: 410px;
}

.col-right {
    position: absolute;
    top: 75px;
    left: 490px;
    width: 450px;
    height: 410px;
}

/* Panels in Left Column */
/* Height: 220px - 24px padding - 4px border = 192px */
#panel-weather {
    height: 192px;
    margin-bottom: 15px;
}

/* Height: 175px - 24px padding - 4px border = 147px */
#panel-garbage {
    height: 147px;
}

/* Panels in Right Column */
/* Height: 240px - 24px padding - 4px border = 212px */
#panel-train {
    height: 212px;
    margin-bottom: 15px;
}

/* Height: 155px - 24px padding - 4px border = 127px */
#panel-notice {
    height: 127px;
}

/* Weather Widget styling */
.weather-content {
    height: 165px;
    position: relative;
    overflow: hidden;
}

.weather-3day-container {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.weather-weekly-container {
    width: 100%;
    position: absolute;
    left: 1000px;
    top: 0;
}

/* Width: 130px - 2px border = 128px */
.weather-item {
    float: left;
    width: 128px;
    text-align: center;
    background-color: #0f172a;
    border: 1px solid #334155;
    padding: 8px 0;
    margin-right: 15px;
}

/* Width: 132px - 2px border = 130px */
.weather-item.last {
    margin-right: 0;
    width: 130px;
}

.weather-item-label {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.weather-item-icon {
    font-size: 32px;
    line-height: 1.2;
    height: 60px;
    color: #3b82f6;
}

.weather-icon-img {
    width: 60px;
    height: 60px;
    border: 0;
    vertical-align: middle;
}

.weather-item-icon.sunny {
    color: #ef4444;
}

.weather-item-telop {
    font-size: 12px;
    margin-bottom: 6px;
    height: 18px;
}

.weather-item-temp {
    font-size: 14px;
}

.temp-max {
    color: #ef4444;
}

.temp-min {
    color: #3b82f6;
}

/* Weekly Weather horizontal items */
.weather-weekly-container {
    width: 100%;
}

/* Width: 55px - 2px border = 53px */
.weather-weekly-item {
    float: left;
    width: 53px;
    text-align: center;
    background-color: #0f172a;
    border: 1px solid #334155;
    padding: 6px 0;
    margin-right: 6px;
}

/* Width: 56px - 2px border = 54px */
.weather-weekly-item.last {
    margin-right: 0;
    width: 54px;
}

.weather-weekly-item-label {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 4px;
    line-height: 1.2;
}

.weather-weekly-item-icon {
    font-size: 20px;
    line-height: 1.2;
    height: 36px;
    color: #ffd700;
}

.weather-weekly-icon-img {
    width: 36px;
    height: 36px;
    border: 0;
    vertical-align: middle;
}

.weather-weekly-item-temp {
    font-size: 14px;
    line-height: 1.2;
}

/* Garbage panel styling */
/* Width: 205px - 16px padding - 4px border-left = 185px */
.garbage-today {
    float: left;
    width: 185px;
    background-color: #1e3a8a;
    border-left: 4px solid #3b82f6;
    padding: 8px;
    font-size: 13px;
    margin-right: 14px;
    margin-bottom: 0px;
}

/* Width: 205px - 16px padding - 4px border-left = 185px */
.garbage-tomorrow {
    float: left;
    width: 185px;
    background-color: #312e81;
    border-left: 4px solid #6366f1;
    padding: 8px;
    font-size: 13px;
    margin-bottom: 0px;
}

.garbage-title {
    font-weight: bold;
    color: #cbd5e1;
    margin-right: 5px;
}

.garbage-items {
    color: #ffffff;
    font-weight: bold;
}

.garbage-upcoming-list {
    clear: both;
    font-size: 12px;
    border-top: 1px solid #334155;
    padding-top: 8px;
    margin-top: 12px;
}

.garbage-upcoming-item {
    margin-bottom: 2px;
}

.garbage-upcoming-date {
    color: #94a3b8;
    display: inline-block;
    width: 80px;
}

.garbage-upcoming-name {
    color: #ffd700;
    font-weight: bold;
}

/* Train Status styling */
.train-meta-header {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 6px;
    border-bottom: 1px solid #334155;
    padding-bottom: 4px;
}

.train-meta-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.train-meta-cell {
    font-size: 11px;
    color: #94a3b8;
    vertical-align: middle;
}

.train-list-container {
    height: 160px;
    overflow: hidden;
}

.train-line {
    margin-bottom: 3px;
    border-bottom: 1px dashed #334155;
    padding-bottom: 2px;
}

.train-line.last {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Train Table Layout to avoid float bugs in legacy browsers */
.train-header-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin-bottom: 2px;
}

.train-header-table td {
    padding: 0px !important;
    margin: 0px !important;
}

.train-header-cell-fav {
    width: 25px;
    vertical-align: middle;
}

.train-header-cell-name {
    vertical-align: middle;
}

.train-header-cell-status {
    width: 90px;
    text-align: right;
    vertical-align: middle;
}

.train-name {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
}

.train-status {
    font-size: 10px;
    font-weight: bold;
    padding: 1px 4px;
    display: inline-block;
}

.train-status.normal {
    background-color: #15803d;
    color: #bbf7d0;
}

.train-status.warning {
    background-color: #a16207;
    color: #fef08a;
}

.train-status.danger {
    background-color: #b91c1c;
    color: #fee2e2;
}

.train-desc {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.25;
    padding-left: 25px; /* Indent under name */
}

/* Hide train description if normal operation to save space */
.train-row-normal .train-desc {
    display: none;
}

/* Notice Panel styling */
.notice-meta-header {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 6px;
    border-bottom: 1px solid #334155;
    padding-bottom: 4px;
}

.notice-meta-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.notice-meta-cell {
    font-size: 11px;
    color: #94a3b8;
    vertical-align: middle;
}

.notice-list {
    font-size: 12px;
}

.notice-item {
    margin-bottom: 4px;
    border-bottom: 1px dashed #334155;
    padding-bottom: 4px;
}

.notice-item.last {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.notice-meta {
    font-size: 9px;
    color: #94a3b8;
    margin-bottom: 1px;
}

.notice-tag {
    background-color: #475569;
    color: #ffffff;
    padding: 0px 3px;
    margin-right: 3px;
    font-size: 9px;
}

.notice-text {
    color: #e2e8f0;
    font-size: 11px;
}

/* Footer Section (TV Remote Color Guide - 4 colors table layout) */
/* Width: 960px - 40px padding = 920px */
/* Height: 45px - 24px padding - 1px border-top = 20px */
.tv-footer {
    position: absolute;
    top: 495px;
    left: 0px;
    width: 920px;
    height: 20px;
    background-color: #0f172a;
    border-top: 1px solid #1e293b;
    padding: 12px 20px;
}

.footer-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.footer-cell {
    width: 25%;
    font-size: 12px;
    line-height: 18px;
    color: #cbd5e1;
    vertical-align: middle;
    text-align: left;
}

.color-circle {
    display: inline-block;
    width: 20px;
    height: 14px;
    margin-right: 6px;
}

.color-circle.red { background-color: #ef4444; }
.color-circle.green { background-color: #22c55e; }
.color-circle.yellow { background-color: #eab308; }
.color-circle.blue { background-color: #3b82f6; }

/* Clearfix helper */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Home Notice Link & Focus Styles */
.notice-link {
    text-decoration: none;
    display: block;
    outline: none;
}
.notice-link:focus .notice-item,
.notice-link:hover .notice-item {
    background-color: #27354a;
    border-bottom-color: #ffd700;
}
.notice-link:focus .notice-text,
.notice-link:hover .notice-text {
    color: #ffd700;
}

/* Notice Page Panels & Split Pane */
#panel-notice-list {
    height: 354px;
}
#panel-notice-detail {
    height: 354px;
}

.notice-scroll-list {
    height: 318px;
    overflow: hidden;
}

.notice-detail-content {
    height: 318px;
    overflow: hidden;
}

/* Notice List Navigation Items */
.notice-list-link {
    text-decoration: none;
    display: block;
    outline: none;
}

.notice-list-item {
    padding: 8px 10px;
    border: 1px solid #334155;
    background-color: #0f172a;
    margin-bottom: 6px;
}

.notice-list-link:focus .notice-list-item,
.notice-list-link:hover .notice-list-item {
    background-color: #27354a;
    border-color: #ffd700;
}

.notice-list-link:focus .notice-list-item .notice-text,
.notice-list-link:hover .notice-list-item .notice-text {
    color: #ffd700;
}

/* Selected Notice Styling */
.notice-list-item-selected {
    background-color: #1e3a8a;
    border: 1px solid #3b82f6;
    border-left: 4px solid #ffd700;
    padding: 8px 10px 8px 7px; /* Subtract 3px left padding for 4px border balance */
    margin-bottom: 6px;
}

.notice-list-link:focus .notice-list-item-selected,
.notice-list-link:hover .notice-list-item-selected {
    background-color: #2563eb;
    border-color: #60a5fa;
}

/* Notice Detail Content Styles */
.notice-detail-header {
    border-bottom: 1px solid #334155;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.notice-detail-title {
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 6px;
}

.notice-detail-meta {
    font-size: 11px;
    color: #94a3b8;
}

.notice-detail-tag {
    background-color: #475569;
    color: #ffffff;
    padding: 1px 4px;
    margin-right: 6px;
}

.notice-detail-body {
    font-size: 12px;
    color: #e2e8f0;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Notice panel title link */
.panel-title-link:focus,
.panel-title-link:hover {
    color: #ffd700 !important;
    text-decoration: underline !important;
}