/**
 * 处方表单样式
 * 包含处方类型选择、处方表格、PD、老花镜度数等。
 */

/* 处方类型选项 */
.prescription-type-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto;
    max-width: 560px;
}

.prescription-option {
    position: relative;
    width: 100%;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 44px 14px 16px;
    background-color: var(--ep-surface);
    cursor: pointer;
    transition: all var(--ep-transition);
    box-shadow: var(--ep-shadow-sm);
    text-align: left;
}

.prescription-option:after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    line-height: 1;
    color: var(--ep-muted);
    transition: transform var(--ep-transition), color var(--ep-transition);
}

.prescription-option:hover {
    border-color: var(--ep-brand);
    background-color: var(--ep-brand-softer);
    box-shadow: var(--ep-shadow);
    transform: translateY(-1px);
}

.prescription-option:hover:after {
    transform: translateY(-50%) translateX(4px);
    color: var(--ep-brand);
}

.prescription-option.selected {
    border-color: var(--ep-brand);
    background-color: var(--ep-brand-soft);
    box-shadow: inset 3px 0 0 var(--ep-brand), var(--ep-ring);
}

.prescription-option.selected:after {
    color: var(--ep-brand);
}

.prescription-option-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ep-brand-soft);
    color: var(--ep-brand);
}

.prescription-option-icon svg {
    width: 24px;
    height: 24px;
}

.prescription-option.selected .prescription-option-icon {
    background: linear-gradient(135deg, var(--ep-brand), var(--ep-brand-dark));
    color: #ffffff;
}

.prescription-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.prescription-option-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ep-ink);
    line-height: 1.3;
    letter-spacing: 0.2px;
}

.prescription-option-desc {
    font-size: 13px;
    color: var(--ep-muted);
    line-height: 1.4;
}

/* 处方表格容器及提示 */
.prescription-table-tip-section {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 20px;
}

.prescription-tip,
.prescription-tip-cyl,
.prescription-tip-add {
    font-size: 13px;
    color: var(--ep-text);
    margin-top: 10px;
    padding: 8px 12px;
    background-color: var(--ep-brand-softer);
    border-left: 3px solid var(--ep-brand);
    border-radius: 0 var(--ep-radius-sm) var(--ep-radius-sm) 0;
}

.prescription-tip-add {
    border-left-color: var(--ep-accent);
    background-color: var(--ep-accent-soft);
}

/* 处方表格 */
.prescription-table {
    width: 100%;
    max-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 auto 20px;
    box-shadow: var(--ep-shadow-sm);
    border-radius: var(--ep-radius);
    overflow: hidden;
}

.prescription-table th,
.prescription-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid var(--ep-border);
    border-right: 1px solid var(--ep-border);
    background-color: var(--ep-surface);
}

.prescription-table th:last-child,
.prescription-table td:last-child {
    border-right: none;
}

.prescription-table tr:last-child td {
    border-bottom: none;
}

.prescription-table th {
    background-color: var(--ep-brand-softer);
    color: var(--ep-brand-dark);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prescription-table tr:hover td {
    background-color: var(--ep-bg);
}

.prescription-table td:first-child {
    text-align: left;
    background-color: var(--ep-bg);
}

/* 眼别标签（OD / OS） */
.eye-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eye-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #ffffff;
    background-color: var(--ep-brand);
    border-radius: 6px;
}

.eye-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ep-ink);
}

/* 选择输入 */
.prescription-input {
    width: 100%;
    padding: 9px 28px 9px 10px;
    border: 1px solid var(--ep-border-strong);
    border-radius: var(--ep-radius-sm);
    background-color: var(--ep-surface);
    font-size: 14px;
    font-family: inherit;
    color: var(--ep-ink);
    transition: all var(--ep-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 16px;
}

.prescription-input:focus {
    border-color: var(--ep-brand);
    box-shadow: var(--ep-ring);
    outline: none;
}

.prescription-input:hover {
    border-color: var(--ep-muted);
}

.prescription-input:disabled,
.disabled-field {
    background-color: var(--ep-bg) !important;
    color: var(--ep-muted) !important;
    cursor: not-allowed;
    border-color: var(--ep-border) !important;
    opacity: 0.7;
}

/* 手动录入处方选项 */
.manual-entry-section {
    width: 100%;
    max-width: 720px;
    margin: 16px auto;
    padding: 16px;
    background-color: var(--ep-bg);
    border-radius: var(--ep-radius);
    border: 1px solid var(--ep-border);
}

.manual-entry-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.manual-entry-checkbox input[type="checkbox"] {
    margin-right: 10px;
    accent-color: var(--ep-brand);
}

.manual-entry-checkbox label {
    font-weight: 600;
    color: var(--ep-ink);
    cursor: pointer;
}

.manual-entry-fields {
    margin-top: 4px;
}

/* PD 部分 */
.pd-section {
    width: 100%;
    max-width: 720px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background-color: var(--ep-brand-softer);
}

.pd-section h4 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ep-brand-dark);
    border-bottom: 1px solid var(--ep-brand-soft);
    padding-bottom: 10px;
}

.pd-type-selector {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background-color: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    padding: 4px;
}

.pd-type-selector label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    color: var(--ep-text);
    transition: all var(--ep-transition);
}

.pd-type-selector label:hover {
    background-color: var(--ep-bg);
}

.pd-type-selector input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--ep-brand);
}

.pd-type-selector label:has(input[type="radio"]:checked) {
    background-color: var(--ep-brand);
    color: #ffffff;
}

.pd-values {
    padding: 4px 0;
}

.pd-tip {
    font-size: 13px;
    color: var(--ep-text);
    margin-top: 12px;
    padding: 8px 12px;
    background-color: var(--ep-surface);
    border-left: 3px solid var(--ep-brand);
    border-radius: 0 var(--ep-radius-sm) var(--ep-radius-sm) 0;
}

.single-pd-container,
.dual-pd-container {
    display: flex;
    align-items: center;
    background-color: var(--ep-surface);
    border: 1px solid var(--ep-border);
    padding: 14px;
    border-radius: var(--ep-radius-sm);
    gap: 16px;
}

.dual-pd-container {
    justify-content: space-between;
}

.dual-pd-container > div {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-values label {
    display: inline-block;
    min-width: 64px;
    margin-right: 4px;
    font-weight: 600;
    font-size: 13px;
    color: var(--ep-text);
    white-space: nowrap;
}

.pd-values select {
    width: auto;
    min-width: 120px;
    flex: 1;
}

/* 老花镜度数选择 */
.reading-type-selector {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 720px;
    background-color: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 5px;
}

.reading-type-selector label {
    padding: 10px 18px;
    background-color: var(--ep-bg);
    border: none;
    border-radius: var(--ep-radius-sm);
    cursor: pointer;
    transition: all var(--ep-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    color: var(--ep-text);
}

.reading-type-selector label:hover {
    background-color: var(--ep-brand-soft);
}

.reading-type-selector input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--ep-brand);
}

.reading-type-selector label:has(input[type="radio"]:checked) {
    background-color: var(--ep-brand);
    color: #ffffff;
    box-shadow: var(--ep-shadow-sm);
}

.reading-readers-select {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.reading-readers-select h4 {
    text-align: center;
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ep-ink);
}

.readers-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.reader-option {
    height: 56px;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    background-color: var(--ep-surface);
    cursor: pointer;
    transition: all var(--ep-transition);
    box-shadow: var(--ep-shadow-sm);
}

.reader-option:hover {
    transform: translateY(-1px);
    box-shadow: var(--ep-shadow);
    background-color: var(--ep-brand-softer);
    border-color: var(--ep-brand);
}

.reader-option.selected {
    background-color: var(--ep-brand);
    color: #ffffff;
    border-color: var(--ep-brand);
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.3);
}

/* 验证错误 */
.ep-validation-errors {
    flex: 0 0 100%;
    order: -1;
    background-color: var(--ep-danger-soft);
    color: #b91c1c;
    padding: 12px 16px;
    border-radius: var(--ep-radius-sm);
    border-left: 4px solid var(--ep-danger);
    margin: 10px 0;
    font-size: 14px;
    display: none;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.ep-validation-errors:before {
    content: "⚠️";
    margin-right: 8px;
}

.ep-prescription-input-error,
.ep-field-error {
    border-color: var(--ep-danger) !important;
    background-color: var(--ep-danger-soft) !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

.ep-field-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}

/* 错误字段抖动动画 */
@keyframes ep-field-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.ep-field-shake {
    animation: ep-field-shake 0.5s ease;
}


/* ==========================================================
   三选一处方来源方式卡片 (Prescription Method Selector)
   ========================================================== */
.ep-prescription-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.ep-method-card {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 12px 16px;
    background: #ffffff;
    border: 2px solid var(--ep-border);
    border-radius: var(--ep-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    box-shadow: var(--ep-shadow-sm);
}

.ep-method-card:hover {
    border-color: var(--ep-brand);
    background-color: var(--ep-brand-softer);
    transform: translateY(-1px);
}

.ep-method-card.active {
    border-color: var(--ep-brand);
    background-color: var(--ep-brand-softer);
    box-shadow: inset 3px 0 0 var(--ep-brand), var(--ep-ring);
}

.ep-method-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ep-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-brand-dark);
    transition: all 0.2s ease;
}

.ep-method-card.active .ep-method-icon {
    background: var(--ep-brand);
    color: #ffffff;
}

.ep-method-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ep-ink);
    margin-bottom: 3px;
}

.ep-method-desc {
    display: block;
    font-size: 12px;
    color: var(--ep-muted);
    line-height: 1.3;
}

/* 稍后发送面板说明文字 */
.later-note {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
    background: var(--ep-brand-softer);
    border: 1px solid var(--ep-border);
    border-left: 3px solid var(--ep-brand);
    border-radius: var(--ep-radius-sm);
}

.later-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ep-text);
}

/* 手风琴面板（展开后位于对应卡片下方） */
.ep-method-panel {
    margin: 0 0 14px;
}

/* 历史处方摘要面板 */
.saved-prescription-summary {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
    background: var(--ep-brand-softer);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
}

.saved-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.saved-summary-table th,
.saved-summary-table td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid var(--ep-border);
    font-size: 14px;
}

.saved-summary-table th {
    background: var(--ep-brand-soft);
    color: var(--ep-brand-dark);
    font-weight: 600;
}

.saved-summary-table td:first-child {
    font-weight: 600;
    color: var(--ep-ink);
    background: var(--ep-bg);
}

.saved-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 14px;
}

.saved-label {
    font-weight: 600;
    color: var(--ep-brand-dark);
    min-width: 70px;
}

/* ==========================================================
   底部独立留言区域 (Note Section)
   ========================================================== */
.user-note-section {
    margin-top: 18px;
    border-top: 1px dashed var(--ep-border-strong);
    padding-top: 12px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.user-note-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ep-text);
    padding: 6px 12px;
    border-radius: var(--ep-radius-sm);
    background: var(--ep-bg);
    transition: all 0.2s ease;
}

.user-note-toggle-label:hover {
    color: var(--ep-brand);
    background: var(--ep-brand-softer);
}

.user-note-toggle-label input[type="checkbox"] {
    accent-color: var(--ep-brand);
}

.user-note-field {
    margin-top: 10px;
}

.user-note-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--ep-border-strong);
    border-radius: var(--ep-radius-sm);
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}

/* ==========================================================
   优化 Readers 页面垂直间距（彻底解决空隙过大）
   ========================================================== */
#readers-prescription .ep-step-header,
#readers-prescription h3 {
    margin-bottom: 8px !important;
    text-align: center;
}

#readers-prescription .ep-step-content {
    padding-top: 4px !important;
    margin-top: 0 !important;
}

/* 副标题紧凑居中 */
#readers-prescription .readers-sub-title,
#readers-prescription h4 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--ep-muted, #64748b);
    text-align: center;
}

/* 度数按钮网格上移靠拢 */
#readers-prescription .readers-options {
    margin-top: 6px !important;
}