/* ---- Client + server error visuals (Bootstrap 5 compatible) ---- */
/* Client-side (HTML5) invalid when form has was-validated, and explicit .is-invalid */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
    border-color: #dc3545; /* Bootstrap danger */
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Client-side valid state visuals */
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
    border-color: #198754; /* Bootstrap success */
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}
/* Optional: show a subtle checkmark background for inputs */
.form-control.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23198754' viewBox='0 0 16 16'%3e%3cpath d='M13.485 1.929a.75.75 0 0 1 .086 1.057l-7 8a.75.75 0 0 1-1.08.05l-3-3a.75.75 0 1 1 1.06-1.06l2.44 2.44 6.47-7.4a.75.75 0 0 1 1.024-.087z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem 1rem;
    padding-right: 2.25rem; /* space for the icon */
}

/* Server-side error (Yii adds .has-error to field wrapper) */
.has-error .form-control,
.has-error .form-select {
    border-color: #dc3545;
}

.has-error .help-block,
.has-error .invalid-feedback {
    display: block;
    color: #dc3545;
}
/* Smooth show/hide for bid date column */
#bidDateCol { 
    transition: opacity 150ms ease, max-height 150ms ease; 
    overflow: hidden; 
}
#bidDateCol.hidden-soft { 
    opacity: 0; 
    max-height: 0; 
}
/* 1. Normalize box-sizing for all elements */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* 2. Set a consistent font family and size */
body {
    /* Prefer system UI + Japanese fonts; keep Meiryo/Yu Gothic for JP legibility */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Helvetica Neue", Arial, "Meiryo", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    max-width: none;
    margin: 0 0 10px;
    padding: 0 24px;
    background: #fff;
    color: #222;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Normalize headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5em;
}
/* Typographic scale tuned for JP UI */
h1 { font-size: 1.75rem; line-height: 1.3; letter-spacing: .01em; }
h2 { font-size: 1.5rem;  line-height: 1.35; }
h3 { font-size: 1.25rem; line-height: 1.4; }

/* 4. Normalize buttons */
button, .btn {
    font-family: inherit;
    font-size: 1em;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* 5. Normalize inputs */
input, select, textarea {
    font-family: inherit;
    font-size: 1em;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    line-height: 1.5;
}
/* Numeric fields (e.g., 郵便番号・入札日・発行日付) use tabular figures for alignment */
input[inputmode="numeric"],
input[type="number"] {
    font-variant-numeric: tabular-nums; /* modern */
    font-feature-settings: "tnum" 1, "kern" 1; /* fallback */
}
/* Improve placeholder contrast slightly while staying subtle */
::placeholder { color: var(--bs-secondary-color, #6c757d); opacity: 1; }

/* Form labels: a touch bolder with tight spacing */
label, .form-label { font-weight: 600; margin-bottom: .25rem; }

/* Card titles in forms */
.panel-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
/* Make Bootstrap 5 selects clearly look like dropdowns */
.form-select {
    background-image: var(--bs-form-select-bg-img);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* 6. Logo and header */
img.logo {
    height: 75px;
    float: right;
}
h1 {
    display: inline-block;
    vertical-align: middle;
}
.page-header {
    margin-top: 20px;
}

/* 7. Buttons spacing: keep primary and reset closer */
#mainSubmitButton { margin-right: 8px; }
#resetButton { margin-left: 0; }

/* 8. Item grid and certificate form contents */
#itemsGrid,
.certificateFormContents {
    margin-bottom: 20px;
}

/* 9. Make grid items clickable */
#itemsGrid .list-group-item {
    cursor: pointer;
}

/* 10. Certificate links look like standard links */
.certificateFormLink {
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}
.certificateFormLink:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* 11. Mandatory field styling */
.mandatory label:after {
    padding-left: 8px;
    color: red;
    content: "*";
}
span.mandatory {
    color: red;
    padding-left: 8px;
    padding-right: 8px;
}

/* 12. Hint block styling */
.hint-block { display: none; } /* Default: do not show inline */
/* In popup modal forms, show text hints but keep them compact */
#modalDialog .hint-block {
    display: block;
    font-size: 0.875rem; /* smaller */
    color: var(--bs-secondary-color, #6c757d); /* muted */
    margin-top: .25rem;
    /* Japanese-friendly wrapping to avoid awkward breaks */
    line-break: strict;        /* respect JA kinsoku rules more strictly */
    word-break: keep-all;      /* don’t split Latin tokens mid-word */
    text-wrap: pretty;         /* modern browsers: avoid runt lines */
}
.hint-inline { margin-left: .5rem; }

/* 12b. Modal title emphasis and spacing */
#modalDialog .modal-title {
    font-size: 1.375rem; /* ~22px */
    font-weight: 700; /* bold */
}
#modalDialog .modal-header {
    align-items: center;
}
#modalDialog .modal-body {
    padding-top: .5rem;
}

/* 12c. Compact hint icon (for tooltip-based hints) */
#modalDialog .hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: .5rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg, #f1f3f5);
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
    line-height: 1;
    cursor: default;
}
#modalDialog .hint-icon:hover {
    background: #e9ecef;
}

/* 12d. Valid check mark for main form labels */
.valid-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;
    color: #198754; /* Bootstrap success */
    font-weight: 700;
    font-size: .95rem;
}

/* 13. Responsive adjustments */
@media (max-width: 992px) {
    body {
        margin: 0;
        padding: 0 12px;
    }
    img.logo {
        height: 75px;
        float: none;
    }
    .page-header {
        text-align: center;
    }
    h1 {
        margin-top: 0;
    }
    #resetButton {
        margin-left: 0;
    }
    .btn {
        width: 100%;
        padding: 15px;
        margin-top: 30px;
    }
}

/* 14. Utility */
.clear-both {
    clear: both;
}

/* 15. Items section and controls */
#itemsSection .badge {
    font-size: 0.9rem;
    background-color: var(--bs-secondary-bg);
}
#itemsPlaceholder {
    padding: 6px 0;
}
.input-group-text i {
    font-size: 1.1rem;
    color: var(--bs-secondary-color, #6c757d);
}
/* Provide a little space between action buttons on mobile */
@media (max-width: 576px) {
    #mainSubmitButton { margin-bottom: 10px; }
}

/* 16. Typography helpers (opt-in) */
/* Apply to Japanese paragraphs or hints to improve line breaking */
.text-ja {
    line-break: strict;
    word-break: keep-all;
}
/* Encourage nicer line breaks (Chrome/Edge/Safari; Firefox partial) */
.text-pretty { text-wrap: pretty; }
/* Balance multi-line headings */
.text-balance { text-wrap: balance; }
/* Keep short fragments together (e.g., wrap 「ます。」) */
.nowrap { white-space: nowrap; }
/* Limit line length for comfortable measure */
.max-measure-60ch { max-width: 60ch; }
.max-measure-40ic { max-width: 40ic; }
/* Keep content on a single line with a slightly smaller size (modal-safe) */
#modalDialog .fit-one-line {
    white-space: nowrap;
    font-size: 0.9rem; /* tweak as needed to fit */
}