/* ==========================================================================
   zen-readability.css
   Readability overrides for the ZenMarket Dashboard (product / customer / parcel screens and the shared template).
   Loaded as the LAST stylesheet of <head> (_Layout.cshtml), so equal-specificity rules here win over the template.
   All text colors meet WCAG AA (4.5:1 or better); borders meet 3:1.
   Pure (icon-only, transparent) and outline buttons keep their transparent background: the solid colours below are
   limited to :not(.btn-pure):not(.btn-outline), the pure variants only get the darker icon colour.
   ========================================================================== */

/* 1. Font weight -----------------------------------------------------------
   The theme sets body/labels to 300 and every input to 100 (hairline).
   Japanese fallback fonts on Windows (Yu Gothic) have real Light weights,
   so JP text renders extra thin. Use normal weight everywhere. */
body,
label,
.control-label,
.form-control,
.form-control::placeholder,
.dropdown-menu > li > a,
.select2-container .select2-selection__rendered {
    font-weight: 400;
}

/* 1b. Body and table text: the template's #76838f (3.9:1) is also the colour of every grid cell and panel text.
   The customer page even sets body to #6e6e6e (4.9:1) inline; this file is loaded later and wins. */
body,
.table,
.jsgrid-cell,
.jsgrid-header-cell,
.panel-body {
    color: #2f3b45;
}

/* 2. Data values: dark, not pale gray --------------------------------------
   Theme: #76838f on white = 3.9:1, on read-only #eee = 3.3:1 (fails AA).
   New:   #1f2933 = 14.8:1 on white, 13.5:1 on read-only. */
.form-control,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1f2933;
}

/* 3. Editable fields: white with a visible border (3:1) ------------------- */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #ffffff;
    border: 1px solid #8a96a3;
}

.form-control:focus {
    border-color: #1d6fd8;
    box-shadow: 0 0 0 3px rgba(29, 111, 216, 0.2);
}

/* 4. Read-only fields: flat, borderless, still fully readable --------------
   Clearly "not a text box", but the value stays dark and legible. */
.form-control[readonly],
.form-control[disabled],
.form-control:disabled,
fieldset[disabled] .form-control {
    background-color: #f3f5f7;
    border-color: transparent;
    color: #1f2933;
    cursor: default;
}

/* 5. Placeholders: distinguishable from real data -------------------------- */
.form-control::placeholder {
    color: #7b8794;
    font-style: italic;
    opacity: 1;
}

/* 6. Labels: secondary to the data, but readable (7.6:1) ------------------ */
.control-label,
.form-control-label {
    color: #4a5560;
}

/* 7. Page structure: cards separate from the background ------------------- */
.page {
    background: #e3e8ec;
}

.panel {
    border: 1px solid #d3dae0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.panel-title {
    color: #1f2933;
    font-weight: 500;
}

/* 8. Buttons: white text needs a darker background ------------------------
   Theme orange = 2.0:1, theme green = 2.3:1. New: 5.0:1 and 5.4:1. */
.btn-warning:not(.btn-pure):not(.btn-outline),
.btn-warning:not(.btn-pure):not(.btn-outline):focus {
    background-color: #b45309;
    border-color: #b45309;
    color: #ffffff;
}
.btn-warning:not(.btn-pure):not(.btn-outline):hover,
.btn-warning:not(.btn-pure):not(.btn-outline):active {
    background-color: #92400e;
    border-color: #92400e;
    color: #ffffff;
}
.btn-pure.btn-warning,
.btn-pure.btn-warning .icon,
.btn-pure.btn-warning .fa {
    color: #b45309;
}

.btn-success:not(.btn-pure):not(.btn-outline),
.btn-success:not(.btn-pure):not(.btn-outline):focus {
    background-color: #0e7a45;
    border-color: #0e7a45;
    color: #ffffff;
}
.btn-success:not(.btn-pure):not(.btn-outline):hover,
.btn-success:not(.btn-pure):not(.btn-outline):active {
    background-color: #0a5f35;
    border-color: #0a5f35;
    color: #ffffff;
}
.btn-pure.btn-success,
.btn-pure.btn-success .icon,
.btn-pure.btn-success .fa {
    color: #0e7a45;
}

/* 9. Links: theme #589ffc at weight 300 = 2.7:1. New: 4.9:1 -------------- */
a {
    color: #1d6fd8;
    font-weight: 400;
}


/* ==========================================================================
   CUSTOMER PAGE ADDITIONS (buttons, row actions, empty panels)
   ========================================================================== */

/* 10. All buttons: the theme sets .btn to weight 300 directly, so the
   body fix in section 1 never reached them. */
.btn {
    font-weight: 500;
}

/* 11. Small buttons: theme .btn-xs is 12px text, 1px padding, about 22px
   tall. New minimum is 28px tall / 13px text (WCAG 2.2 asks 24px). */
.btn-xs {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 3px;
}

/* Icon-only small buttons: square 28 x 28 with a 14px icon. */
.btn-icon.btn-xs {
    min-width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.btn-icon.btn-xs .icon {
    font-size: 14px;
}

/* Space between neighbouring buttons, so Delete is not 4px from Edit. */
.jsgrid-cell .btn + .btn,
.jsgrid-cell .btn + a.btn,
.jsgrid-cell a.btn + .btn,
.panel-actions .btn + .btn {
    margin-left: 6px;
}

/* 12. Outline grey buttons (edit pencil, trash, info, Edit, 凍結):
   theme icon 3.9:1, border 1.2:1 (invisible). New: 9.7:1 icon, 3:1 border. */
.btn-outline.btn-default,
.btn-default.btn-flat {
    color: #3a4651;
    background-color: #ffffff;
    border-color: #8a96a3;
}
.btn-outline.btn-default:hover,
.btn-outline.btn-default:focus,
.btn-default.btn-flat:hover,
.btn-default.btn-flat:focus {
    color: #1f2933;
    background-color: #e8edf1;
    border-color: #5f6b77;
}

/* Solid grey buttons (Cancel, Hide, Change, upload, +): 3.2:1 -> 9.7:1 */
.btn-default {
    color: #3a4651;
    background-color: #e8edf1;
    border-color: #b8c2cc;
}
.btn-default:hover,
.btn-default:focus {
    color: #1f2933;
    background-color: #d8dfe5;
    border-color: #8a96a3;
}

/* .blue-grey-400 forces #a3afb7 (2.2:1) with !important on chat buttons. */
.btn.blue-grey-400 {
    color: #3a4651 !important;
}

/* 13. Destructive buttons: theme red #f96868 = 2.9:1. New #c62828 = 5.6:1 */
.btn-outline.btn-danger {
    color: #c62828;
    background-color: #ffffff;
    border-color: #c62828;
}
.btn-outline.btn-danger:hover,
.btn-outline.btn-danger:focus {
    color: #ffffff;
    background-color: #c62828;
    border-color: #c62828;
}
.btn-danger:not(.btn-outline):not(.btn-pure) {
    color: #ffffff;
    background-color: #c62828;
    border-color: #c62828;
}
.btn-pure.btn-danger,
.btn-pure.btn-danger .icon {
    color: #c62828;
}

/* 14. Blue buttons: primary 3.3:1 -> 4.9:1, info (link icon) 2.0:1 -> 5.4:1 */
.btn-primary:not(.btn-pure):not(.btn-outline),
.btn-primary:not(.btn-pure):not(.btn-outline):focus {
    color: #ffffff;
    background-color: #1d6fd8;
    border-color: #1d6fd8;
}
.btn-primary:not(.btn-pure):not(.btn-outline):hover,
.btn-primary:not(.btn-pure):not(.btn-outline):active {
    color: #ffffff;
    background-color: #1559b0;
    border-color: #1559b0;
}
.btn-pure.btn-primary,
.btn-pure.btn-primary .icon {
    color: #1d6fd8;
}
.btn-info:not(.btn-pure),
.btn-info:not(.btn-pure):focus {
    color: #ffffff;
    background-color: #0e7490;
    border-color: #0e7490;
}
.btn-info:not(.btn-pure):hover {
    background-color: #0b5c73;
    border-color: #0b5c73;
}
.btn-pure.btn-info,
.btn-pure.btn-info .icon {
    color: #0e7490;
}

/* Keyboard focus that is actually visible. */
.btn:focus-visible {
    outline: 2px solid #1d6fd8;
    outline-offset: 2px;
}