/*
 * MITENE OPS — v25 / Quiet Indigo
 * v22 index.php + v24 layout compatible. Replace style.css in full.
 * One consistent palette. No changes to PHP, data, or sending behavior.
 */
:root {
    color-scheme: light;
    --bg: #ffffff;
    --panel: #ffffff;
    --text: #362029;
    --muted: #856672;
    --line: #ece1e5;
    --line-strong: #dcc9d1;
    --soft: #faf6f8;
    --soft-2: #fcfafb;
    --input-bg: #f9f9f9;
    --input-border: #cab4bd;
    --primary: #db4b85;
    --primary-hover: #c53d73;
    --primary-pressed: #aa3363;
    --primary-soft: #ffeef5;
    --primary-text: #b63569;
    --focus-ring: rgba(219, 75, 133, .16);
    --row-hover: #fcf5f8;
    --dark: #362029;
    --red: #b43b4b;
    --red-hover: #982f3d;
    --success: #216b52;
    --success-soft: #f0f8f4;
    --radius: 10px;
    --sidebar: 242px;
    --control-height: 40px;
}

/* Base */
* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

a {
    color: inherit;
    text-underline-offset: 3px;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a,
label,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

::selection {
    background: #ffdfec;
    color: #362029;
}

/* Desktop: a quiet, white sidebar and white workspace */
.app-shell {
    min-height: 100vh;
    background: var(--bg);
}

.app-main {
    min-width: 0;
    margin-left: var(--sidebar);
    background: var(--bg);
}

.desktop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid var(--line);
    overflow-y: auto;
}

.sidebar-brand {
    min-height: 82px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--line);
}

.sidebar-brand strong {
    display: block;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: #362029;
}

.sidebar-brand small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.brand-mark {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--primary);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px solid rgba(255, 255, 255, .94);
    border-radius: 4px;
}

.brand-mark.small {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 8px;
}

.brand-mark.small::after {
    inset: 7px;
    border-radius: 3px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 12px;
}

.nav-link {
    font-size: 15px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 0 13px;
    border-radius: 8px;
    color: #735963;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.nav-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #baa5ad;
}

.nav-link:hover {
    background: #f9f4f6;
    color: #362029;
}

.nav-link.active {
    background: var(--primary-soft);
    color: var(--primary-text);
    font-weight: 700;
}

.nav-link.active .nav-dot {
    background: var(--primary);
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.nav-link.logout-link {
    margin-top: 18px;
    color: #856672;
}

.sidebar-foot {
    margin-top: auto;
    padding: 18px;
    color: #8c717c;
    font-size: 10px;
    letter-spacing: .16em;
    font-weight: 600;
}

/* Existing checkbox drawer: keep the same sibling selectors */
.site-header {
    display: none;
}

.drawer-toggle {
    position: fixed;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}

.mobile-menu-button {
    display: none;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line-strong);
    background: #ffffff;
    border-radius: 9px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-button span {
    display: block;
    width: 19px;
    height: 2px;
    background: #543441;
    border-radius: 2px;
}

.mobile-menu-button:hover {
    background: #faf4f6;
    border-color: #c19dab;
}

.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(47, 23, 33, .38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    cursor: pointer;
}

.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 90;
    width: min(84vw, 320px);
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
    box-shadow: -8px 0 30px rgba(47, 23, 33, .10);
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-overflow-scrolling: touch;
}

.drawer-toggle:checked~.drawer-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.drawer-toggle:checked~.mobile-drawer {
    transform: translateX(0);
    visibility: visible;
}

.drawer-head {
    height: 66px;
    padding: 0 14px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-brand strong {
    font-size: 16px;
    font-weight: 700;
}

.drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    color: #674754;
    background: #f8f5f6;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.drawer-close:hover {
    background: #f6ecf0;
    color: #362029;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
}

.drawer-nav .nav-link {
    min-height: 48px;
}

/* Content and visual hierarchy */
main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 26px 28px 40px;
    background: var(--bg);
}

.guest-shell .app-main {
    margin-left: 0;
}

.guest-shell main {
    max-width: 760px;
    padding-top: 40px;
}

.panel,
.card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(52, 24, 35, .025);
}

.panel {
    padding: 22px;
    margin-bottom: 20px;
}

/* Panels are not buttons: no colored block hover or movement. */
.panel h1 {
    color: #362029;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.panel p,
.section-note,
.cast-count {
    color: var(--muted);
}

.panel p {
    line-height: 1.75;
}

.grid.cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.card {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card::before {
    content: none;
}

.card b {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #362029;
    font-variant-numeric: tabular-nums;
}

.card span {
    color: #856672;
    font-size: 13px;
    font-weight: 500;
}

.narrow {
    max-width: 520px;
    margin: 40px auto;
}

/* Controls: neutral fields; indigo reserved for the primary action */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.form-grid>button {
    grid-column: 1 / -1;
    margin-top: 10px;
}

form {
    margin: 0;
}

label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #543441;
    font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: #442833;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select {
    height: var(--control-height);
    padding: 0 11px;
}

textarea {
    display: block;
    padding: 10px 11px;
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

input::placeholder,
textarea::placeholder {
    color: #806b73;
    opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
textarea:hover,
select:hover {
    background: #f9f6f7;
    border-color: #ad909c;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

button,
.secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-height);
    min-width: 78px;
    padding: 0 13px;
    border: 1px solid #dac7cf;
    border-radius: 8px;
    background: #ffffff;
    color: #543441;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

button:hover,
.secondary-link:hover {
    background: #f7f0f3;
    color: #362029;
    border-color: #b3919f;
}

button:active,
.secondary-link:active {
    background: #f3e8ec;
}

.send,
.bulk-btn,
.bulk-send-button {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.send:hover,
.bulk-btn:hover,
.bulk-send-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(172, 54, 101, .12);
}

.send:active,
.bulk-btn:active,
.bulk-send-button:active {
    background: var(--primary-pressed);
    border-color: var(--primary-pressed);
}

.danger {
    color: var(--red);
    border-color: #d8c7ca;
    background: #ffffff;
}

.danger:hover {
    color: var(--red-hover);
    border-color: #c78891;
    background: #fdf1f3;
    box-shadow: none;
}

button:disabled,
button:disabled:hover,
select:disabled {
    background: #f7f1f3;
    color: #806b73;
    border-color: #e6d9de;
    opacity: 1;
    box-shadow: none;
    cursor: not-allowed;
}

.panel>form:not(.form-grid)>button {
    margin-top: 12px;
}

.compact-select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    margin: 0;
}

.run-controls {
    margin: 0;
}

/* Notices, diagnostics and detail pages */
.flash {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: 16px;
}

.flash.success {
    background: var(--success-soft);
    border-color: #cce2d7;
    color: var(--success);
}

.flash.error {
    background: #fdf2f3;
    border-color: #eed0d5;
    color: #a33445;
}

.flash.info {
    background: #fef3f7;
    border-color: #fadbe7;
    color: #9a3f63;
}

.diag {
    padding: 12px 14px;
    background: var(--soft-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    margin: 14px 0;
}

pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: #38202a;
    color: #f4e4ea;
    padding: 16px;
    border-radius: 9px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.7;
}

dl {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px 14px;
}

dt {
    font-weight: 600;
    color: #674754;
}

dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.source-chip {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid #e9dbe1;
    border-radius: 6px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
    color: #674754;
    background: #faf6f8;
    white-space: nowrap;
}

/* Tables: no row cards on mobile; only the table scrolls horizontally */
.table-wrap {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c8acb7 #f8f3f5;
    margin-bottom: 20px;
}

.table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-wrap::-webkit-scrollbar-track {
    background: #f8f3f5;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: #c8acb7;
    border: 2px solid #f8f3f5;
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

th,
td {
    text-align: left;
    vertical-align: middle;
    padding: 10px 11px;
    border-bottom: 1px solid #f0e6ea;
}

th {
    height: 42px;
    color: #674754;
    background: #f9f4f6;
    border-bottom-color: #e8d8de;
    font-size: 12px;
    font-weight: 600;
}

td {
    color: #442833;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background-color .12s ease;
}

tbody tr:hover {
    background: var(--row-hover);
}

tbody tr:focus-within {
    background: #fcf7f9;
}

td a {
    color: #bd4273;
    text-decoration-color: #ecbdd0;
}

td a:hover {
    color: #a32859;
    text-decoration: underline;
}

/* Toolbar */
.cast-list-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 20px;
    margin-bottom: 16px;
}

.cast-list-head h1 {
    margin: 0;
}

.cast-count {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#selected-count {
    color: var(--primary-text);
    font-weight: 700;
}

.cast-toolbar {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 164px 112px;
    gap: 9px;
    align-items: center;
    justify-self: end;
    width: min(780px, 100%);
}

.search-wrap,
.sort-wrap {
    min-width: 0;
}

.cast-toolbar .bulk-btn {
    width: 100%;
}

.admin-toolbar {
    grid-template-columns: minmax(200px, 1fr) 180px;
    width: min(650px, 100%);
}

.cast-table-wrap {
    width: 100%;
}

.cast-table {
    min-width: 1180px;
    table-layout: fixed;
    white-space: nowrap;
}

.cast-table th,
.cast-table td {
    height: 54px;
    padding: 7px 9px;
}

.cast-table th {
    height: 42px;
}

.cast-table .check-col {
    width: 44px;
    text-align: center;
}


.panel input,
.check-col input {
    width: 19px;
    height: 19px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--primary);
}

.cast-table tbody td:not(.actions):not(.memo-cell):not(.check-col) {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* No display:flex on td: it breaks column widths. Forms provide the alignment. */
.cast-table td.actions {
    display: table-cell;
    white-space: nowrap;
}

.cast-table td.actions>form {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 7px 0 0;
}

.cast-table td.actions>form:last-child {
    margin-right: 0;
}

.cast-table td.actions button {
    height: 38px;
    font-size: 12px;
    padding: 0 9px;
}

/* Cast management */
.admin-cast-table {
    min-width: 1180px;
}

.admin-cast-table th:nth-child(1),
.admin-cast-table td:nth-child(1) {
    width: 160px;
}

.admin-cast-table th:nth-child(2),
.admin-cast-table td:nth-child(2) {
    width: 120px;
}

.admin-cast-table th:nth-child(3),
.admin-cast-table td:nth-child(3) {
    width: 80px;
}

.admin-cast-table th:nth-child(4),
.admin-cast-table td:nth-child(4) {
    width: 420px;
}

.admin-cast-table th:nth-child(5),
.admin-cast-table td:nth-child(5) {
    width: 180px;
}

.admin-cast-table th:nth-child(6),
.admin-cast-table td:nth-child(6) {
    width: 220px;
}

.memo-edit-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 64px;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.memo-edit-form input {
    height: 38px !important;
    min-width: 0;
    font-size: 13px;
}

.memo-edit-form button {
    width: 64px;
    min-width: 64px;
    height: 38px;
    padding: 0 8px;
    font-size: 12px;
}

.admin-actions form {
    width: 82px;
}

.admin-actions button {
    width: 82px;
    min-width: 82px;
}

/* Sending: both operation groups stay on one row, without overlapping. */
.send-cast-table {
    min-width: 1180px;
}

.send-cast-table th:nth-child(1),
.send-cast-table td:nth-child(1) {
    width: 44px;
}

.send-cast-table th:nth-child(2),
.send-cast-table td:nth-child(2) {
    width: 150px;
}

.send-cast-table th:nth-child(3),
.send-cast-table td:nth-child(3) {
    width: 102px;
}

.send-cast-table th:nth-child(4),
.send-cast-table td:nth-child(4) {
    width: 60px;
}

.send-cast-table th:nth-child(5),
.send-cast-table td:nth-child(5) {
    width: 90px;
}

.send-cast-table th:nth-child(6),
.send-cast-table td:nth-child(6) {
    width: 180px;
}

.send-cast-table th:nth-child(7),
.send-cast-table td:nth-child(7) {
    width: 554px;
}

.cast-table td.actions .run-controls,
.cast-table .operation-box {
    display: inline-grid;
    grid-template-columns: 100px 64px 82px;
    gap: 6px;
    align-items: center;
    width: 258px;
    padding: 0;
    border: 0;
    margin: 0 8px 0 0;
    background: transparent;
    vertical-align: middle;
}

.cast-table td.actions .run-controls:last-child {
    margin-right: 0;
}

.cast-table .run-controls .compact-select,
.cast-table .operation-box .compact-select {
    height: 38px;
    min-width: 0;
    padding: 0 6px;
    font-size: 12px;
}

.cast-table .run-controls button,
.cast-table .operation-box button {
    width: 82px;
    min-width: 82px;
    height: 38px;
    padding: 0 5px;
    font-size: 12px;
}

.cast-table .operation-title {
    display: none;
}

.cast-table .operation-fields {
    display: contents;
}

/* Compatibility for an older HOME execution form */
.panel>.actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.panel>.actions form {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft-2);
}

.panel>.actions .run-controls {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 90px;
    gap: 8px;
}

.panel>.actions .run-controls button {
    grid-column: 1 / -1;
    width: 100%;
}

/* Bulk execution and progress */
.bulk-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bulk-page-head h1 {
    margin: 0 0 6px;
}

.bulk-page-head p {
    margin: 0;
}

.bulk-selected-table {
    margin-top: 18px;
}

.bulk-send-panel {
    max-width: 780px;
}

.bulk-condition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0;
}

.bulk-warning {
    padding: 12px 14px;
    background: #faf6f8;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #775965;
    font-size: 13px;
    margin-bottom: 16px;
}

.bulk-send-button {
    width: 100%;
    height: 44px;
    font-size: 14px;
}

.bulk-progress {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #f5dbe5;
    background: #fffafc;
    border-radius: 10px;
}

.bulk-progress-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.bulk-progress-number {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.bulk-progress-number strong {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-text);
}

.bulk-progress-number span {
    color: #674754;
    font-weight: 500;
}

.bulk-progress-eta {
    color: #674754;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bulk-progress-track {
    height: 10px;
    margin: 16px 0;
    background: #f2e5ea;
    border-radius: 8px;
    overflow: hidden;
}

.bulk-progress-bar {
    height: 100%;
    width: 0;
    background: var(--primary);
    border-radius: 8px;
    transition: width .25s ease;
}

.bulk-progress-current {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #f0e1e7;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #674754;
}

.bulk-progress-current strong {
    color: #362029;
}

.bulk-progress-stats {
    color: #856672;
    font-size: 13px;
}

.bulk-progress-stats b {
    color: #543441;
}

.bulk-progress-log {
    max-height: 190px;
    overflow: auto;
    margin-top: 12px;
    border-top: 1px solid var(--line);
}

.bulk-log-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid #f0e4e9;
    font-size: 13px;
}

.bulk-log-status {
    font-weight: 600;
    white-space: nowrap;
}

.bulk-log-row.ok .bulk-log-status {
    color: var(--success);
}

.bulk-log-row.error .bulk-log-status {
    color: var(--red);
}

.bulk-complete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 14px;
    background: var(--success-soft);
    border: 1px solid #cce2d7;
    border-radius: 8px;
    color: var(--success);
}

.bulk-complete a {
    color: var(--success);
    font-weight: 600;
}

@media (max-width: 1260px) and (min-width: 901px) {
    :root {
        --sidebar: 220px;
    }

    main {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cast-list-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cast-toolbar {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .desktop-sidebar {
        display: none;
    }

    .app-main {
        margin-left: 0;
    }

    .site-header {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
        background: #ffffff;
        border-bottom: 1px solid var(--line);
    }

    .header-inner {
        min-height: 60px;
        padding: 6px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-menu-button {
        display: flex;
    }

    .drawer-overlay,
    .mobile-drawer {
        display: block;
    }

    main {
        padding: 14px 10px 30px;
    }

    .panel {
        padding: 14px;
        margin-bottom: 14px;
    }

    .panel h1 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .grid.cards {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-bottom: 14px;
    }

    .card {
        padding: 16px;
    }

    .card b {
        font-size: 26px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-grid>button {
        width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select {
        font-size: 16px;
    }

    :root {
        --control-height: 44px;
    }

    .cast-list-head {
        display: block;
        margin-bottom: 12px;
    }

    .cast-list-head>div:first-child {
        margin-bottom: 12px;
    }

    .cast-toolbar {
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 8px;
        width: 100%;
    }

    .search-wrap {
        grid-column: 1 / -1;
    }

    .admin-toolbar {
        grid-template-columns: minmax(0, 1fr) 160px;
        width: 100%;
    }

    .admin-toolbar .sort-wrap {
        grid-column: 1 / -1;
    }

    .cast-table th,
    .cast-table td {
        height: 58px;
        padding: 7px 9px;
    }

    .cast-table th {
        height: 44px;
    }

    .admin-cast-table {
        width: 1260px;
        min-width: 1260px;
    }

    .admin-cast-table th:nth-child(4),
    .admin-cast-table td:nth-child(4) {
        width: 468px;
    }

    .admin-cast-table th:nth-child(6),
    .admin-cast-table td:nth-child(6) {
        width: 252px;
    }

    .memo-edit-form input {
        height: 42px !important;
        font-size: 16px;
    }

    .memo-edit-form button {
        height: 42px;
        font-size: 13px;
    }

    .admin-actions form,
    .admin-actions button {
        width: 94px;
        min-width: 94px;
    }

    .cast-table td.actions button {
        height: 42px;
    }

    .send-cast-table {
        width: 1270px;
        min-width: 1270px;
    }

    .send-cast-table th:nth-child(7),
    .send-cast-table td:nth-child(7) {
        width: 644px;
    }

    .cast-table td.actions .run-controls,
    .cast-table .operation-box {
        width: 302px;
        grid-template-columns: 120px 80px 90px;
        gap: 6px;
        margin-right: 12px;
    }

    .cast-table td.actions .run-controls:last-child {
        margin-right: 0;
    }

    .cast-table .run-controls .compact-select,
    .cast-table .operation-box .compact-select {
        height: 42px;
        font-size: 16px;
        padding: 0 5px;
    }

    .cast-table .run-controls button,
    .cast-table .operation-box button {
        width: 90px;
        min-width: 90px;
        height: 42px;
        font-size: 13px;
    }

    .panel>.actions {
        grid-template-columns: 1fr;
    }

    .bulk-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .secondary-link {
        width: 100%;
    }

    .bulk-condition-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bulk-condition-grid .compact-select {
        height: 44px;
    }

    .bulk-send-panel {
        max-width: none;
    }

    .bulk-selected-table table {
        min-width: 620px;
    }

    dl {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    dt {
        margin-top: 8px;
        font-size: 12px;
        color: #856672;
    }

    .bulk-progress {
        padding: 14px;
    }

    .bulk-progress-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bulk-progress-number strong {
        font-size: 30px;
    }

    .bulk-progress-eta {
        white-space: normal;
    }

    .bulk-log-row {
        align-items: flex-start;
    }

    .bulk-complete {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* v27 — Settings / attendance extraction */
.settings-panel {
    max-width: 920px;
}

.settings-form {
    display: grid;
    gap: 14px;
}

.settings-form label {
    max-width: 820px;
}

.settings-form input[type="url"] {
    background: var(--input-bg);
}

.field-help {
    max-width: 100%;
    margin: 15px 0;
    padding: 11px 12px;
    background: var(--soft-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.field-help code {
    color: #543441;
    background: #f5eef1;
    padding: 1px 5px;
    border-radius: 4px;
}

.save-settings-btn {
    width: fit-content;
    min-width: 140px;
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.save-settings-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

.send-toolbar {
    grid-template-columns: minmax(220px, 1fr) 160px 178px 112px;
    width: min(980px, 100%);
}

.attendance-extract-form {
    margin: 0;
}

.attendance-extract-btn {
    width: 100%;
    color: var(--primary-text);
    border-color: #f3cbdb;
    background: var(--primary-soft);
}

.attendance-extract-btn:hover {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 1260px) and (min-width: 901px) {
    .send-toolbar {
        grid-template-columns: minmax(220px, 1fr) 150px 178px 112px;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .send-toolbar {
        grid-template-columns: minmax(0, 1fr) 132px;
        gap: 8px;
    }

    .send-toolbar .search-wrap {
        grid-column: 1 / -1;
    }

    .send-toolbar .sort-wrap {
        grid-column: 1 / -1;
    }

    .send-toolbar .attendance-extract-form,
    .send-toolbar #bulk-form {
        min-width: 0;
    }

    .attendance-extract-btn,
    .cast-toolbar .bulk-btn {
        width: 100%;
        height: 44px;
        min-width: 0;
        font-size: 13px;
        padding: 0 8px;
    }

    .settings-panel {
        max-width: none;
    }

    .save-settings-btn {
        width: 100%;
    }
}

/* automation SaaS / tenant management */
.stack-form {
    display: grid;
    gap: 14px;
}

.stack-form button {
    width: 100%;
    margin-top: 4px;
}

.login-card {
    margin-top: 9vh;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    text-align: center;
}

.login-brand .brand-mark {
    margin-bottom: 4px;
}

.login-brand strong {
    font-size: 24px;
    line-height: 1.2;
}

.login-brand span:last-child {
    color: var(--muted);
    font-size: 13px;
}

.admin-login-link {
    display: block;
    margin-top: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.account-status-bar {
    min-height: 48px;
    padding: 8px 28px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #ffffff;
    color: var(--muted);
    font-size: 12px;
}

.account-status-bar strong {
    color: var(--text);
    font-size: 13px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--line);
}

.state-active {
    background: #eef8f3;
    color: #176a4b;
    border-color: #cce4d8;
}

.state-trial {
    background: #fff8e9;
    color: #8b6212;
    border-color: #ead9ae;
}

.state-expired,
.state-suspended {
    background: #fdf1f3;
    color: #a33445;
    border-color: #edccd2;
}

.trial-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 13px 16px;
    border: 1px solid #ead9ae;
    background: #fffaf0;
    border-radius: 10px;
}

.trial-notice strong {
    color: #7f5a13;
}

.trial-notice span {
    color: #8b6b2c;
    font-size: 12px;
}

.locked-panel {
    max-width: 760px;
    margin: 30px auto;
    text-align: center;
    padding: 38px 28px;
}

.lock-icon {
    font-size: 34px;
    margin-bottom: 8px;
}

.locked-panel>p {
    max-width: 620px;
    margin: 0 auto 22px;
}

.locked-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.locked-meta>div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft-2);
    text-align: left;
}

.locked-meta span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 4px;
}

.locked-meta strong {
    display: block;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.capacity-card {
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    display: grid;
    grid-template-columns: 170px minmax(220px, 1fr);
    gap: 8px 22px;
    align-items: center;
}

.capacity-card>div:first-child span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.capacity-card>div:first-child strong {
    display: block;
    font-size: 28px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.capacity-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.capacity-copy b {
    font-size: 14px;
}

.capacity-copy span {
    color: var(--muted);
    font-size: 12px;
}

.capacity-track {
    grid-column: 1/-1;
    height: 8px;
    overflow: hidden;
    background: #f5edf0;
    border-radius: 999px;
}

.capacity-track span {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: inherit;
}

.capacity-card small {
    grid-column: 1/-1;
    color: var(--muted);
}


.daily-send-capacity-card {
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    display: grid;
    grid-template-columns: 230px minmax(220px, 1fr);
    gap: 8px 22px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(51, 24, 35, .05);
}

.daily-send-capacity-card>div:first-child span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.daily-send-capacity-card>div:first-child strong {
    display: block;
    font-size: 28px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.daily-send-capacity-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.daily-send-capacity-copy b {
    font-size: 14px;
}

.daily-send-capacity-copy span {
    color: var(--muted);
    font-size: 12px;
}

.daily-send-capacity-track {
    grid-column: 1/-1;
    height: 8px;
    overflow: hidden;
    background: #f5edf0;
    border-radius: 999px;
}

.daily-send-capacity-track span {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: inherit;
}

.daily-send-capacity-card small {
    grid-column: 1/-1;
    color: var(--muted);
}

.daily-send-capacity-card.limit-reached {
    border-color: #e7b7bd;
    background: #fffafa;
}

.daily-send-capacity-card.limit-reached .daily-send-capacity-track span {
    background: var(--red);
}

.bulk-log-row.quota {
    font-weight: 700;
}

@media(max-width:700px) {
    .daily-send-capacity-card {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 10px;
    }

    .daily-send-capacity-card>div:first-child strong {
        font-size: 24px;
    }

    .daily-send-capacity-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

.switch-status {
    display: inline-flex;
    min-width: 42px;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--line);
}

.switch-status.on {
    background: #eef8f3;
    color: #176a4b;
    border-color: #cce4d8;
}

.switch-status.off {
    background: #f7f4f5;
    color: #866975;
}

.row-disabled {
    opacity: .7;
}

.muted {
    color: var(--muted);
    font-size: 12px;
}

.disabled-mark {
    color: #b8a3ab;
}

button.secondary {
    background: #ffffff;
    color: #674754;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.panel-head h1 {
    margin-bottom: 0;
}

.privacy-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f9f4f6;
    color: #856672;
    border: 1px solid var(--line);
    font-size: 11px;
    white-space: nowrap;
}

.transient-notice {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 18px 0 12px;
    padding: 12px 14px;
    border: 1px solid #cfe1d8;
    background: #f2f9f5;
    border-radius: 8px;
    color: #28634f;
}

.transient-notice span {
    font-size: 12px;
}

.tenant-create-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tenant-create-form>button {
    grid-column: 1/-1;
}

.tenant-table {
    min-width: 1100px;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
}

.button-link:hover {
    background: var(--soft);
}

.admin-tenant-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.admin-tenant-head h1 {
    margin: 8px 0 8px;
}

.admin-tenant-stats {
    display: flex;
    gap: 10px;
}

.admin-tenant-stats>div {
    min-width: 130px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft-2);
}

.admin-tenant-stats span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.admin-tenant-stats strong {
    display: block;
    margin-top: 2px;
    font-size: 18px;
}

.inline-reset-form {
    display: grid;
    grid-template-columns: minmax(220px, 420px) auto;
    align-items: end;
    gap: 10px;
}

.inline-reset-form button {
    margin: 0 !important;
}

@media (max-width: 900px) {
    .account-status-bar {
        padding: 8px 16px;
    }

    .trial-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .locked-meta {
        grid-template-columns: 1fr;
    }

    .capacity-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .capacity-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .capacity-track,
    .capacity-card small {
        grid-column: 1;
    }

    .tenant-create-form {
        grid-template-columns: 1fr;
    }

    .tenant-create-form>button {
        grid-column: 1;
    }

    .admin-tenant-head {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-tenant-stats {
        width: 100%;
    }

    .admin-tenant-stats>div {
        flex: 1;
        min-width: 0;
    }

    .inline-reset-form {
        grid-template-columns: 1fr;
    }

    .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Admin usage dashboard */
.admin-dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px
}

.admin-dashboard-head h1 {
    margin: 0 0 6px;
    font-size: 26px
}

.admin-dashboard-head p {
    margin: 0;
    color: var(--muted)
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px
}

.admin-kpi {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 17px 18px;
    min-width: 0
}

.admin-kpi>span {
    display: block;
    color: var(--muted);
    font-size: 12px
}

.admin-kpi>strong {
    display: block;
    margin-top: 4px;
    font-size: 28px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums
}

.admin-kpi>small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px
}

.admin-kpi .kpi-date {
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere
}

.admin-usage-table {
    min-width: 1180px
}

.admin-usage-table td {
    vertical-align: middle
}

.admin-usage-table td strong {
    display: block;
    font-size: 14px
}

.admin-usage-table td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px
}

.admin-usage-sub {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px
}

.usage-mini {
    width: 120px;
    max-width: 100%;
    height: 5px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #f5edf0
}

.usage-mini span {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: inherit
}

.tenant-detail-kpis {
    margin-bottom: 18px
}

@media(max-width:1100px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:700px) {
    .admin-dashboard-head {
        align-items: stretch;
        flex-direction: column
    }

    .admin-dashboard-head .button-link {
        width: 100%
    }

    .admin-kpi-grid {
        grid-template-columns: 1fr
    }

    .admin-kpi>strong {
        font-size: 24px
    }
}

/* Single-cast send progress overlay */
.send-processing-overlay[hidden] {
    display: none !important
}

.send-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(42, 15, 26, .38);
    opacity: 0;
    transition: opacity .16s ease
}

.send-processing-overlay.is-visible {
    opacity: 1
}

.send-processing-card {
    width: min(440px, calc(100vw - 40px));
    background: #ffffff;
    border: 1px solid #f2e6eb;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(42, 15, 26, .22);
    padding: 30px 28px;
    text-align: center
}

.send-processing-card strong {
    display: block;
    margin: 10px 0 8px;
    font-size: 22px;
    line-height: 1.4;
    color: #371f29
}

.send-processing-card p {
    margin: 0;
    color: #745964;
    font-size: 14px;
    line-height: 1.75
}

.send-processing-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border: 4px solid #ffe8f1;
    border-top-color: #e85590;
    border-radius: 50%;
    animation: automation-spin .8s linear infinite
}

.send-processing-warning {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff7e8;
    border: 1px solid #f4d9a2;
    color: #8a5b13;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6
}

@keyframes automation-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:640px) {
    .send-processing-overlay {
        padding: 16px
    }

    .send-processing-card {
        width: 100%;
        padding: 26px 20px;
        border-radius: 16px
    }

    .send-processing-card strong {
        font-size: 20px
    }
}

/* automation — candidate exclusion condition */
.settings-section {
    display: grid;
    gap: 10px;
    max-width: 820px;
    padding: 2px 0 8px;
}

.settings-section+.settings-section {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.settings-section h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.candidate-exclude-label {
    display: grid;
    gap: 7px;
    font-weight: 600;
}

.candidate-exclude-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.candidate-exclude-row input[type="number"] {
    width: 92px;
    min-width: 92px;
    background: var(--input-bg);
}

.candidate-exclude-row span {
    color: var(--text);
    font-weight: 600;
}

.settings-section .field-help strong {
    color: var(--text);
}

@media (max-width: 600px) {
    .candidate-exclude-row {
        align-items: flex-start;
    }

    .candidate-exclude-row span {
        flex: 1 1 190px;
        padding-top: 11px;
    }
}

/*追加*/

body>div.app-shell>div>main>section>form>div:nth-child(3)>label>div>input[type=number] {
    width: 80px;
}

/* =========================================================
   v28 — Readability color tuning
   Layout is intentionally unchanged.
   ========================================================= */
:root {
    --bg: #fbf5f7;
    --panel: #ffffff;
    --text: #331823;
    --muted: #7a5f6a;
    --line: #ead9e0;
    --line-strong: #d6bcc6;
    --soft: #faf3f6;
    --soft-2: #fcf8fa;
    --input-bg: #ffffff;
    --input-border: #d3b8c3;
    --primary: #d6407c;
    --primary-hover: #c2336c;
    --primary-pressed: #a7295b;
    --primary-soft: #ffedf4;
    --primary-text: #b93167;
    --focus-ring: rgba(214, 64, 124, .18);
    --row-hover: #fff4f8;
    --dark: #331823;
    --red: #c23b4b;
    --red-hover: #a92f3f;
    --success: #17724f;
    --success-soft: #edf8f3;
}

/* Workspace contrast: keep existing layout, improve visual separation */
.app-shell,
.app-main,
main {
    background: var(--bg);
}

.desktop-sidebar,
.site-header,
.mobile-drawer,
.account-status-bar {
    background: #ffffff;
}

.panel,
.card,
.capacity-card,
.admin-kpi {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 1px 3px rgba(51, 24, 35, .05);
}

.panel h1,
.settings-section h2,
.card b,
.admin-kpi>strong,
.capacity-card>div:first-child strong {
    color: var(--text);
}

/* All form controls stay white */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select,
.settings-form input[type="url"],
.candidate-exclude-row input[type="number"] {
    background: #ffffff !important;
    color: var(--text);
    border-color: var(--input-border);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
textarea:hover,
select:hover {
    background: #ffffff !important;
    border-color: #b58f9e;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    background: #ffffff !important;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Default action buttons: blue and clearly actionable */
button {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(120, 33, 68, .10);
}

button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

button:active {
    background: var(--primary-pressed);
    border-color: var(--primary-pressed);
}

/* Secondary / navigation actions remain neutral */
.secondary-link,
.button-link,
button.secondary {
    background: #ffffff;
    color: #5c3d49;
    border-color: #d6bcc6;
    box-shadow: none;
}

.secondary-link:hover,
.button-link:hover,
button.secondary:hover {
    background: #f8f1f4;
    color: #3d202c;
    border-color: #b795a3;
}

/* Stronger functional button colors */
.send,
.bulk-btn,
.bulk-send-button,
.save-settings-btn {
    background: #d6407c;
    border-color: #d6407c;
    color: #ffffff;
}

.send:hover,
.bulk-btn:hover,
.bulk-send-button:hover,
.save-settings-btn:hover {
    background: #c2336c;
    border-color: #c2336c;
    color: #ffffff;
}

.attendance-extract-btn {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

.attendance-extract-btn:hover {
    background: #0b625c;
    border-color: #0b625c;
    color: #ffffff;
}

.danger {
    background: #ffffff;
    color: var(--red);
    border-color: #d9a7ae;
    box-shadow: none;
}

.danger:hover {
    background: #fff1f3;
    color: var(--red-hover);
    border-color: #c66f7b;
}

button:disabled,
button:disabled:hover,
select:disabled {
    background: #f3e8ec !important;
    color: #947a84 !important;
    border-color: #e5d5db !important;
    box-shadow: none;
}

/* Table readability */
.table-wrap {
    background: #ffffff;
    border-color: var(--line);
}

th {
    background: #f7eef2;
    color: #5b3e4a;
    border-bottom-color: #e2cfd7;
}

td {
    color: #442431;
}

tbody tr:hover {
    background: var(--row-hover);
}

/* Helpful notices/chips */
.field-help,
.bulk-warning,
.admin-tenant-stats>div,
.locked-meta>div {
    background: #fcf8fa;
    border-color: #ecdce2;
}

.flash.info {
    background: #ffeef5;
    border-color: #fbcfe1;
    color: #9d345e;
}

.flash.success {
    background: #eef8f3;
    border-color: #c8e2d5;
    color: #176a4b;
}

.flash.error {
    background: #fff1f3;
    border-color: #efc8cf;
    color: #a33445;
}

/* Mobile: preserve structure, only keep the clearer palette */
@media (max-width: 900px) {
    main {
        background: var(--bg);
    }
}


/* v29 — Production environment application */
.production-apply-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 2px auto 20px;
    padding: 0 26px;

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;

    background: linear-gradient(135deg,
        #fe3082 0%,
        #fe5397 35%,
        #ff4d94 70%,
        #e54686 100%);

    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;

    box-shadow:
        0 8px 20px rgba(229, 70, 134, .28),
        inset 0 1px 0 rgba(255, 255, 255, .25);

    position: relative;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.production-apply-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;

    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, .35) 50%,
        transparent 100%);

    transform: skewX(-20deg);
    transition: left .55s ease;
}

.production-apply-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(229, 70, 134, .38),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    filter: brightness(1.05);
}

.production-apply-button:hover::before {
    left: 140%;
}

.production-apply-button:active {
    transform: translateY(0);
    box-shadow:
        0 5px 14px rgba(229, 70, 134, .25),
        inset 0 1px 0 rgba(255, 255, 255, .2);
}

.production-apply-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

.application-pending-note {
    max-width: 620px;
    margin: 0 auto 14px;
    padding: 12px 14px;
    border: 1px solid #fbcfe1;
    border-radius: 9px;
    background: #ffeef5;
    text-align: left;
}

.application-pending-note strong,
.application-pending-note span {
    display: block;
}

.application-pending-note strong {
    color: #9d345e;
}

.application-pending-note span {
    margin-top: 3px;
    color: #8e5c70;
    font-size: 12px;
}

.application-panel {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.application-head {
    margin-bottom: 18px;
}

.application-head h1 {
    margin-top: 14px;
    margin-bottom: 6px;
}

.application-head p {
    margin: 0;
}

.application-form {
    display: grid;
    gap: 18px;
}

.application-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.application-summary>div {
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fcf8fa;
}

.application-summary span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.application-summary strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.application-grid {
    align-items: end;
}

.required-mark {
    display: inline-block;
    width: fit-content;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #fff1f3;
    color: #a33445;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

.application-note {
    display: grid;
    gap: 6px;
}

.application-agree {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    font-weight: 500;
}

.application-agree input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.application-submit {
    width: 100%;
    min-height: 46px;
    font-size: 14px;
}

.application-current {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.application-current strong,
.application-current span {
    display: block;
}

.application-current span {
    margin-top: 3px;
    font-size: 12px;
}

.application-admin-table {
    min-width: 1320px;
}

.application-admin-table td {
    vertical-align: top;
}

.application-admin-table td strong,
.application-admin-table td small {
    display: block;
}

.application-admin-table td small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.application-note-cell {
    min-width: 240px;
    max-width: 360px;
    white-space: normal;
    line-height: 1.6;
}

.application-admin-actions {
    display: flex;
    gap: 7px;
    align-items: center;
}

.application-admin-actions form {
    margin: 0;
}

.application-admin-actions button {
    height: 36px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .locked-panel {
        padding: 28px 16px;
    }

    .production-apply-button {
        width: 100%;
    }

    .application-summary {
        grid-template-columns: 1fr;
    }

    .application-panel {
        max-width: none;
    }

    .application-form {
        gap: 15px;
    }
}




.cast-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

.cast-register-grid>.panel {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .cast-register-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
    }
}

/* =========================================================
   automation Product Tour
   ========================================================= */
.automation-tour-open {
    overflow: hidden;
}

.automation-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(42, 15, 26, .34);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.automation-tour-target {
    position: relative !important;
    z-index: 9992 !important;
}

.automation-tour-interactive {
    pointer-events: auto !important;
}

.automation-tour-highlight {
    position: fixed;
    z-index: 9993;
    pointer-events: none;
    border: 3px solid var(--primary);
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .98), 0 6px 24px rgba(120, 29, 65, .22);
    transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}

.automation-tour-callout {
    position: fixed;
    z-index: 9994;
    visibility: hidden;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 22px rgba(120, 33, 68, .28);
    animation: automationTourCalloutPulse 1.25s ease-in-out infinite;
}

.automation-tour-callout::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid var(--primary);
    transform: translateY(-50%);
}

.automation-tour-callout.is-below::before {
    top: -7px;
    left: 18px;
    border-top: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 8px solid var(--primary);
    transform: none;
}

@keyframes automationTourCalloutPulse {

    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 8px 22px rgba(120, 33, 68, .28);
    }

    50% {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(120, 33, 68, .42);
    }
}

.automation-tour-popover {
    position: fixed;
    z-index: 9995;
    width: min(390px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 22px 70px rgba(35, 4, 16, .30);
    color: #331722;
}

.automation-tour-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.automation-tour-step,
.automation-tour-welcome-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
}

.automation-tour-close {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f8f1f4;
    color: #6b4655;
    font-size: 22px;
    line-height: 1;
    box-shadow: none;
}

.automation-tour-title {
    display: block;
    margin: 0 0 8px;
    color: #331722;
    font-size: 18px;
    line-height: 1.45;
}

.automation-tour-text {
    margin: 0;
    color: #765562;
    font-size: 13px;
    line-height: 1.8;
}

.automation-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.automation-tour-actions>div {
    display: flex;
    gap: 8px;
}

.automation-tour-actions button,
.automation-tour-done,
.automation-tour-welcome-actions button {
    min-height: 40px;
    border-radius: 9px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 800;
}

.automation-tour-skip,
.automation-tour-back,
.automation-tour-welcome-skip {
    border: 1px solid #e9d8df;
    background: #ffffff;
    color: #7a5966;
}

.automation-tour-next,
.automation-tour-welcome-start {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.automation-tour-complete {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.automation-tour-complete-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
}

.automation-tour-done {
    width: 100%;
    margin-top: 16px;
}

.automation-tour-welcome-wrap {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(42, 15, 26, .42);
}

.automation-tour-welcome {
    width: min(460px, 100%);
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
    text-align: left;
}

.automation-tour-welcome-badge {
    margin-bottom: 12px;
}

.automation-tour-welcome>strong {
    display: block;
    color: #331722;
    font-size: 20px;
    line-height: 1.5;
}

.automation-tour-welcome>p {
    margin: 10px 0 0;
    color: #7b5b68;
    font-size: 13px;
    line-height: 1.8;
}

.automation-tour-welcome-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

.nav-link[data-tour-start="1"] .nav-dot {
    box-shadow: 0 0 0 4px rgba(214, 64, 124, .15);
}

@media (max-width: 700px) {
    .automation-tour-open {
        overflow: auto;
    }

    .automation-tour-popover {
        width: auto;
        max-height: min(46vh, 360px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 13px;
    }

    .automation-tour-title {
        font-size: 16px;
    }

    .automation-tour-text {
        font-size: 12.5px;
        line-height: 1.7;
    }

    .automation-tour-actions {
        align-items: stretch;
    }

    .automation-tour-actions>div {
        flex: 1;
        justify-content: flex-end;
    }

    .automation-tour-next {
        min-width: 92px;
    }

    .automation-tour-welcome {
        padding: 20px 17px;
    }

    .automation-tour-welcome-actions {
        flex-direction: column-reverse;
    }

    .automation-tour-welcome-actions button {
        width: 100%;
    }
}



.sidebar-brand {
    min-height: 82px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line);
}

.sidebar-logo {
    display: block;
    width: auto;
    max-width: 170px;
    max-height: 46px;
    object-fit: contain;
}


.mobile-logo {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 38px;
    object-fit: contain;
}

.drawer-logo {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 36px;
    object-fit: contain;
}

/* Account summary: sidebar/drawer bottom */
.logged-in-account {
    margin-top: auto;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--line);
    color: #735963;
}

.logged-in-account-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.logged-in-account-head strong,
.logged-in-account>strong {
    display: block;
    width: 100%;
    color: #362029;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.logged-in-account-meta {
    display: grid;
    gap: 3px;
    margin-top: 8px;
}

.logged-in-account-meta span,
.logged-in-account-label {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.logged-in-account .status-pill {
    min-height: 23px;
    padding: 2px 8px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .mobile-drawer {
        display: flex;
        flex-direction: column;
    }

    .drawer-nav {
        flex: 0 0 auto;
    }

    .mobile-drawer .logged-in-account {
        margin-top: auto;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* automation service switch / Okini Talk */
.service-switch {
    padding: 0 14px 14px
}

.service-switch label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #9d7c89;
    margin-bottom: 6px;
    margin-top: 6px;
}

.service-switch select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #efdfe5;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 12px;
    font-weight: 700;
    color: #331722
}

.service-usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.service-usage-card {
    margin: 0
}

.service-check {
    display: flex !important;
    align-items: center;
    gap: 8px
}

.service-check input {
    width: auto !important
}

.badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #f7eef2
}

.badge.ok,
.badge.on {
    background: #e9f8ef;
    color: #168347
}

.badge.off {
    background: #f6f1f3;
    color: #806b73
}

.bulk-row,
.row-actions,
.back-row,
.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.stack,
.control-stack {
    display: grid;
    gap: 12px
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.action-card {
    border: 1px solid #efe4e8;
    border-radius: 12px;
    padding: 16px;
    display: grid;
    gap: 10px
}

.notice {
    padding: 14px 16px;
    border: 1px solid #efdfe5;
    border-radius: 12px;
    background: #fcf8fa;
    margin-bottom: 16px
}

.notice b,
.notice span {
    display: block
}

.muted {
    color: #806b73
}

.success-btn {
    background: #168347;
    color: #ffffff;
    border: 0
}

.service-usage-card .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media(max-width:800px) {

    .service-usage-grid,
    .action-grid {
        grid-template-columns: 1fr
    }

    .service-switch {
        padding: 10px 16px
    }

    .service-usage-card .admin-kpi-grid {
        grid-template-columns: 1fr 1fr
    }
}

/* 2026-09-28 — Okini Talk layout cleanup / cast bulk status */
.okini-controls {
    display: grid;
    gap: 14px;
    margin: 16px 0 18px;
}

.okini-attendance-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fcf8fa;
}

.okini-attendance-action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.okini-attendance-form {
    margin: 0;
}

.okini-attendance-button {
    min-height: 44px;
    padding-inline: 20px;
    white-space: nowrap;
}

.okini-attendance-help {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.okini-filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.8fr) auto;
    gap: 16px 18px;
    align-items: end;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
}

.okini-filter-main,
.okini-filter-bottom {
    display: contents;
}

.okini-filter-search,
.okini-filter-sort {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.okini-filter-search>span,
.okini-filter-sort>span {
    color: #543441;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.okini-filter-search input,
.okini-filter-sort select {
    min-height: 46px;
    margin: 0;
}

.okini-filter-bottom {
    display: contents;
}

.okini-filter-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.okini-filter-buttons .btn,
.okini-filter-buttons button {
    min-width: 96px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 18px;
}

.okini-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid #cfe5d8;
    border-radius: 12px;
    background: #f4fbf7;
}

.okini-bulk-check-all {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #4a2433;
    font-weight: 700;
}

.okini-bulk-check-all input {
    width: 19px;
    height: 19px;
    margin: 0;
    flex: 0 0 auto;
}

.okini-bulk-check-all small {
    margin-left: 4px;
    color: #856672;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.okini-bulk-send-button {
    min-height: 44px;
    padding-inline: 20px;
    white-space: nowrap;
}

.cast-bulk-status-form {
    margin: -2px 0 14px;
}

.cast-bulk-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fcf8fa;
}

.cast-bulk-check-all {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: #543441;
    font-weight: 700;
    white-space: nowrap;
}

.cast-bulk-check-all input,
.cast-admin-check {
    width: 19px;
    height: 19px;
    margin: 0;
}

.cast-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cast-bulk-actions button {
    min-height: 40px;
    padding-inline: 16px;
}

.cast-bulk-on {
    background: #168347;
    color: #ffffff;
}

.cast-bulk-on:hover {
    background: #116d3a;
}

.cast-bulk-off {
    background: #ffffff;
    color: #674754;
    border: 1px solid #e3d7dc;
}

.cast-bulk-off:hover {
    background: #f8f4f6;
}

.cast-bulk-delete {
    background: #b42318;
    color: #ffffff;
    border: 1px solid #b42318;
}

.cast-bulk-delete:hover {
    background: #912018;
    border-color: #912018;
}

#cast-admin-selected-count,
#okini-selected-count {
    color: var(--primary-text);
    font-weight: 800;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 900px) {

    .okini-attendance-bar,
    .okini-bulk-bar,
    .cast-bulk-status-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .okini-filter-panel {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .okini-filter-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
        gap: 12px;
        align-items: end;
    }

    .okini-filter-bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-top: 14px;
        border-top: 1px solid #f6edf1;
    }

    .okini-attendance-action,
    .okini-filter-buttons,
    .cast-bulk-actions {
        width: 100%;
    }

    .okini-attendance-action>*,
    .okini-filter-buttons>*,
    .cast-bulk-actions>* {
        flex: 1 1 0;
    }

    .okini-attendance-action form,
    .okini-attendance-action form button,
    .okini-bulk-send-button {
        width: 100%;
    }

    .okini-attendance-help {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .okini-filter-main {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .okini-filter-panel,
    .okini-attendance-bar,
    .okini-bulk-bar {
        padding: 12px;
    }

    .okini-filter-buttons,
    .cast-bulk-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .cast-bulk-delete {
        grid-column: 1 / -1;
    }

    .okini-bulk-check-all {
        width: 100%;
        flex-wrap: wrap;
    }

    .okini-bulk-check-all small {
        width: 100%;
        margin-left: 28px;
    }

    .cast-bulk-check-all {
        width: 100%;
    }
}

/* Okini Talk: enable today's attending casts from cast list */
.cast-today-enable-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid #f3d8e3;
    border-radius: 12px;
    background: #fff7fa;
}

.cast-today-enable-form {
    margin: 0;
    flex: 0 0 auto;
}

.cast-today-enable-button {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 800;
    white-space: nowrap;
}

.cast-today-enable-button:hover:not(:disabled) {
    filter: brightness(.96);
}

.cast-today-enable-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.cast-today-enable-help {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    color: #856672;
    font-size: 13px;
    text-align: right;
}

.cast-today-enable-help small {
    color: #a68a95;
    font-size: 12px;
}

@media (max-width: 900px) {
    .cast-today-enable-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .cast-today-enable-form,
    .cast-today-enable-button {
        width: 100%;
    }

    .cast-today-enable-help {
        align-items: flex-start;
        text-align: left;
    }
}

/* Cast list: 7-column layout after bulk selection checkbox was added */
.admin-cast-table {
    width: 100%;
    min-width: 1080px;
    table-layout: fixed;
}

.admin-cast-table th:nth-child(1),
.admin-cast-table td:nth-child(1) {
    width: 44px;
}

.admin-cast-table th:nth-child(2),
.admin-cast-table td:nth-child(2) {
    width: 160px;
}

.admin-cast-table th:nth-child(3),
.admin-cast-table td:nth-child(3) {
    width: 105px;
}

.admin-cast-table th:nth-child(4),
.admin-cast-table td:nth-child(4) {
    width: 72px;
}

.admin-cast-table th:nth-child(5),
.admin-cast-table td:nth-child(5) {
    width: 340px;
}

.admin-cast-table th:nth-child(6),
.admin-cast-table td:nth-child(6) {
    width: 150px;
}

.admin-cast-table th:nth-child(7),
.admin-cast-table td:nth-child(7) {
    width: 190px;
}

.admin-cast-table .memo-edit-form {
    grid-template-columns: minmax(120px, 1fr) 58px;
    width: 100%;
}

.admin-cast-table .memo-edit-form button {
    width: 58px;
    min-width: 58px;
}

.admin-cast-table td.actions.admin-actions {
    overflow: visible;
    text-overflow: clip;
}

.admin-cast-table .admin-actions form {
    width: auto;
    margin-right: 6px;
}

.admin-cast-table .admin-actions form:last-child {
    margin-right: 0;
}

.admin-cast-table .admin-actions button {
    width: 82px;
    min-width: 82px;
    padding-inline: 8px;
}

@media (max-width: 900px) {
    .admin-cast-table {
        width: 1080px;
        min-width: 1080px;
    }

    .admin-cast-table th:nth-child(1),
    .admin-cast-table td:nth-child(1) {
        width: 44px;
    }

    .admin-cast-table th:nth-child(2),
    .admin-cast-table td:nth-child(2) {
        width: 160px;
    }

    .admin-cast-table th:nth-child(3),
    .admin-cast-table td:nth-child(3) {
        width: 105px;
    }

    .admin-cast-table th:nth-child(4),
    .admin-cast-table td:nth-child(4) {
        width: 72px;
    }

    .admin-cast-table th:nth-child(5),
    .admin-cast-table td:nth-child(5) {
        width: 340px;
    }

    .admin-cast-table th:nth-child(6),
    .admin-cast-table td:nth-child(6) {
        width: 150px;
    }

    .admin-cast-table th:nth-child(7),
    .admin-cast-table td:nth-child(7) {
        width: 190px;
    }
}

/* 2026-09-28 — Okini Talk HOME dashboard */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 190px;
    margin-bottom: 18px;
    padding: 28px 30px;
    border: 1px solid #f7dce7;
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 16%, rgba(255, 255, 255, .85) 0 0, rgba(255, 255, 255, 0) 30%),
        linear-gradient(135deg, #fff5f9 0%, #ffedf4 52%, #fff8fb 100%);
    box-shadow: 0 10px 30px rgba(122, 43, 75, .06);
}

.hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(219, 75, 133, .07);
    pointer-events: none;
}

.hero>div {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 10px;
    padding: 0 11px;
    border: 1px solid #f8d2e1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
}

.hero h1 {
    margin: 0 0 10px;
    color: #411d2b;
    font-size: clamp(26px, 2.3vw, 34px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.hero p {
    max-width: 680px;
    margin: 0;
    color: #805f6c;
    font-size: 14px;
    line-height: 1.8;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
}

.stats>div {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 118px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(54, 32, 41, .035);
}

.stats>div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #e76398 0%, #db4b85 100%);
}

.stats>div:nth-child(2)::before {
    background: linear-gradient(180deg, #eb7da9 0%, #d95c8e 100%);
}

.stats>div:nth-child(3)::before {
    background: linear-gradient(180deg, #46a67d 0%, #216b52 100%);
}

.stats span {
    color: #876a76;
    font-size: 12px;
    font-weight: 700;
}

.stats b {
    color: #43202e;
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.stats+.panel {
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(54, 32, 41, .035);
}

.stats+.panel>h1 {
    margin: 0;
    padding: 19px 22px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    color: #362029;
    font-size: 18px;
    font-weight: 800;
}

.stats+.panel .table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.stats+.panel table {
    margin: 0;
}

.stats+.panel thead th {
    background: #fcf6f8;
    color: #795966;
    font-size: 12px;
    font-weight: 800;
}

.stats+.panel tbody td {
    height: 50px;
}

@media (max-width: 900px) {
    .hero {
        min-height: auto;
        padding: 24px;
        border-radius: 15px;
    }

    .stats {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .stats>div {
        min-height: 108px;
        padding: 18px;
    }
}

@media (max-width: 640px) {
    .hero {
        margin-bottom: 14px;
        padding: 20px 18px;
        border-radius: 13px;
    }

    .hero h1 {
        font-size: 25px;
    }

    .hero p {
        font-size: 13px;
    }

    .stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .stats>div {
        min-height: 92px;
        padding: 16px 18px;
    }

    .stats b {
        font-size: 28px;
    }

    .stats+.panel>h1 {
        padding: 16px 18px;
        font-size: 17px;
    }
}

/* 2026-09: plan management and durable-job UI; original navigation/theme retained. */
[hidden] {
    display: none !important
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start
}

.admin-form-grid>label,
.admin-filter>label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    font-size: 14px;
    font-weight: 650
}

.admin-form-grid input:not([type=checkbox]),
.admin-form-grid select,
.admin-form-grid textarea,
.admin-filter input,
.admin-filter select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px
}

.field-full {
    grid-column: 1/-1;
    min-width: 0
}

.plan-editor {
    margin: 6px 0 10px;
    padding: 20px;
    border: 1px solid #f5dce6;
    border-radius: 12px;
    background: #fff8fb
}

.enterprise-fields {
    margin-top: 18px
}

.plan-quote {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #f5dce6;
    border-radius: 9px
}

.plan-quote strong {
    font-size: 23px;
    line-height: 1.4;
    color: #7b2648
}

.plan-quote small {
    color: #865e6e;
    line-height: 1.7
}

.confirm-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0 18px;
    line-height: 1.65;
    font-weight: 500 !important
}

.confirm-line input[type=checkbox] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 4px
}

.admin-filter {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 24px
}

.admin-filter>label:first-of-type {
    flex: 2 1 220px
}

.admin-filter>label {
    flex: 1 1 145px
}

.admin-filter>button {
    min-height: 44px
}

.admin-contract-table td {
    vertical-align: middle
}

.admin-contract-table small,
.admin-contract-table .review-badge {
    display: block;
    margin-top: 5px
}

.review-badge {
    font-size: 12px;
    font-weight: 650;
    color: #925018
}

.create-account>summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 0
}

.create-account[open]>summary {
    margin-bottom: 20px
}

.usage-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0
}

.usage-main strong {
    font-size: 36px;
    line-height: 1.2;
    color: #662740
}

.usage-main>span {
    color: #80606d
}

.usage-card progress {
    display: block;
    width: 100%;
    height: 10px;
    margin: 15px 0;
    accent-color: #ca467b
}

.usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.usage-grid>div {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.usage-grid span {
    font-size: 13px;
    color: #80606d
}

.usage-grid b {
    font-size: 19px
}

.service-usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch
}

.worker-health.is-warning {
    border-left: 4px solid #d69b37
}

.worker-health.is-ok {
    border-left: 4px solid #47977b
}

.worker-health .panel-head {
    flex-wrap: wrap;
    gap: 10px
}

.unknown-card {
    padding: 16px 0;
    border-top: 1px solid #eedfe5
}

.unknown-card summary {
    cursor: pointer;
    line-height: 1.7;
    font-weight: 650
}

.unknown-card form {
    margin-top: 16px
}

.application-review .row-actions {
    margin-top: 18px;
    flex-wrap: wrap
}

.application-note {
    overflow-wrap: anywhere
}

.upgrade-shell {
    max-width: 780px;
    padding: 36px 18px;
    margin: auto
}

.upgrade-logo {
    display: block;
    width: 180px;
    max-width: 70%;
    height: auto;
    margin-bottom: 22px
}

.upgrade-shell p {
    line-height: 1.8
}

.upgrade-shell .stack {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.panel,
.app-main,
.panel>form,
.table-wrap {
    min-width: 0
}

.panel pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%
}

.job-connection-warning {
    color: #94521c
}

.logged-in-account-meta a {
    font-size: 12px;
    text-decoration: underline
}

.daily-send-capacity-card {
    margin-bottom: 18px
}

@media(max-width:800px) {
    .service-usage-grid {
        grid-template-columns: 1fr
    }

    .admin-form-grid {
        grid-template-columns: 1fr
    }

    .field-full {
        grid-column: auto
    }

    .plan-editor {
        padding: 15px
    }

    .plan-quote {
        padding: 14px
    }

    .plan-quote strong {
        font-size: 21px
    }

    .admin-filter>label {
        flex-basis: calc(50% - 12px)
    }

    .admin-filter>label:first-of-type {
        flex-basis: 100%
    }

    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .usage-main strong {
        font-size: 31px
    }
}

@media(max-width:420px) {
    .admin-filter>label {
        flex-basis: 100%
    }

    .panel-head {
        flex-wrap: wrap
    }

    .usage-grid b {
        font-size: 18px
    }

    .plan-quote strong {
        font-size: 20px
    }

    .upgrade-shell {
        padding: 16px 12px
    }
}

/* HOME visual parity: MITENE / OKINI TALK */
.home-contract-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    display: none;
}

.home-contract-meta>span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(220, 74, 132, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #765462;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.home-contract-meta .home-contract-trial {
    border-color: rgba(213, 146, 34, .22);
    background: rgba(255, 248, 230, .9);
    color: #9a6511;
}

.stats .home-plan-name {
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: -.02em;
    word-break: keep-all;
}

@media (max-width: 640px) {
    .home-contract-meta {
        gap: 6px;
        margin-top: 14px;
    }

    .home-contract-meta>span {
        min-height: 28px;
        padding: 4px 9px;
        font-size: 11px;
    }
}

/* Notices */
.notice-index-panel {
    padding: 0;
    overflow: hidden
}

.notice-index-panel .page-heading {
    padding: 28px 30px 20px;
    border-bottom: 1px solid #f2e6eb
}

.notice-index-panel .page-heading h1 {
    margin: 6px 0 8px
}

.notice-index-panel .page-heading p {
    margin: 0;
    color: #886472
}

.notice-list {
    display: flex;
    flex-direction: column
}

.notice-list-item {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) 24px;
    gap: 18px;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #f6edf1;
    color: #381b27;
    text-decoration: none;
    transition: .18s ease
}

.notice-list-item:last-child {
    border-bottom: 0
}

.notice-list-item:hover {
    background: #fff7fa
}

.notice-list-item time {
    color: #9b7b88;
    font-size: 13px;
    font-weight: 700
}

.notice-list-item span {
    font-weight: 700;
    line-height: 1.55
}

.notice-list-item b {
    font-size: 24px;
    color: #a68793;
    text-align: right
}

.empty-state {
    padding: 40px 28px;
    text-align: center;
    color: #9a7a87
}

.notice-detail {
    max-width: 980px;
    margin-inline: auto;
    padding: 30px 36px
}

.notice-back {
    display: inline-flex;
    margin-bottom: 22px
}

.notice-detail header {
    padding-bottom: 24px;
    border-bottom: 1px solid #f2e7eb
}

.notice-detail header time {
    display: block;
    color: #967482;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px
}

.notice-detail header h1 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.35
}

.notice-rich-body {
    padding: 28px 0 8px;
    color: #472633;
    font-size: 15px;
    line-height: 1.9
}

.notice-rich-body h2 {
    margin: 30px 0 12px;
    font-size: 22px
}

.notice-rich-body h3 {
    margin: 26px 0 10px;
    font-size: 18px
}

.notice-rich-body p {
    margin: 0 0 16px
}

.notice-rich-body ul,
.notice-rich-body ol {
    margin: 0 0 18px;
    padding-left: 1.6em
}

.notice-rich-body blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    border-left: 4px solid #e8538f;
    background: #fff7fa;
    color: #704a59;
    border-radius: 0 10px 10px 0
}

.notice-rich-body a {
    color: #d93f7d;
    text-decoration: underline
}

.admin-notice-editor .panel-head {
    align-items: flex-start
}

.notice-editor-field {
    display: block
}

.field-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #50303d
}

.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid #ebd8e0;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: #fbf6f8
}

.rich-toolbar button {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #ead6de;
    border-radius: 7px;
    background: #ffffff;
    color: #512f3d;
    box-shadow: none;
    font-size: 13px
}

.rich-toolbar button:hover {
    background: #ffeef5;
    border-color: #f5bfd5
}

.rich-editor {
    min-height: 260px;
    padding: 16px 18px;
    border: 1px solid #ebd8e0;
    border-radius: 0 0 10px 10px;
    background: #ffffff;
    outline: none;
    line-height: 1.8;
    overflow: auto
}

.rich-editor:focus {
    border-color: #eb73a3;
    box-shadow: 0 0 0 3px rgba(232, 83, 143, .12)
}

.rich-editor h2 {
    font-size: 22px;
    margin: 24px 0 10px
}

.rich-editor p {
    margin: 0 0 14px
}

.badge.notice-published {
    background: #e8f7ef;
    color: #238051
}

.badge.notice-scheduled {
    background: #fff6dc;
    color: #96680d
}

@media(max-width:640px) {
    .notice-index-panel .page-heading {
        padding: 22px 18px 16px
    }

    .notice-list-item {
        grid-template-columns: 1fr 20px;
        gap: 6px 12px;
        padding: 16px 18px
    }

    .notice-list-item time {
        grid-column: 1;
        font-size: 12px
    }

    .notice-list-item span {
        grid-column: 1
    }

    .notice-list-item b {
        grid-column: 2;
        grid-row: 1/3;
        align-self: center
    }

    .notice-detail {
        padding: 22px 18px
    }

    .rich-toolbar {
        gap: 5px
    }

    .rich-toolbar button {
        padding: 6px 8px
    }

    .rich-editor {
        min-height: 220px;
        padding: 14px
    }
}


.logo-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.logo-home-link:focus-visible {
    outline: 3px solid rgba(235, 37, 116, .28);
    outline-offset: 4px;
    border-radius: 8px;
}

/* 2026-09-29 — Mitene / Okini send page layout unification */
.okini-send-toolbar .okini-search-form,
.okini-send-toolbar .okini-sort-form {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.okini-send-toolbar .okini-search-form input,
.okini-send-toolbar .okini-sort-form select {
    width: 100%;
    margin: 0;
}

.okini-send-help {
    margin: 0 0 14px;
}

.okini-send-table {
    min-width: 1040px;
}

.okini-send-table th:nth-child(1),
.okini-send-table td:nth-child(1) {
    width: 52px;
    text-align: center;
}

.okini-send-table th:nth-child(2),
.okini-send-table td:nth-child(2) {
    width: 22%;
}

.okini-send-table th:nth-child(3),
.okini-send-table td:nth-child(3) {
    width: 13%;
}

.okini-send-table th:nth-child(4),
.okini-send-table td:nth-child(4) {
    width: 14%;
}

.okini-send-table th:nth-child(5),
.okini-send-table td:nth-child(5) {
    width: 14%;
}

.okini-send-table th:nth-child(6),
.okini-send-table td:nth-child(6) {
    width: 17%;
}

.okini-send-table th:nth-child(7),
.okini-send-table td:nth-child(7) {
    width: 140px;
}

.okini-send-table td:last-child .btn {
    min-width: 96px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {

    .okini-send-toolbar .okini-search-form,
    .okini-send-toolbar .okini-sort-form {
        grid-column: 1 / -1;
    }
}




/*追加*/


#okini-recipient-filter{
    width: 200px !important;
}

input[name="candidate_exclude_sent_days"]{
     width: 80px !important;
}


.back-row a.text-link{
    margin-bottom: 10px;
}

.template-title span,.template-title{
    display: none;
}


/* input 全体のベーススタイル */
input[name="template_image"] {

  padding: 6px 11px !important;
}

/* 2026-10-01 — 店舗向け送信履歴をシンプルに表示 */
.history-page .panel-head {
    align-items: flex-start;
    margin-bottom: 16px;
}

.history-page .panel-head h1,
.history-page .panel-head p {
    margin-top: 0;
}

.history-table table,
.history-recipient-table table {
    width: 100%;
}

.history-table th,
.history-table td,
.history-recipient-table th,
.history-recipient-table td {
    vertical-align: middle;
}

.history-detail-btn {
    white-space: nowrap;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.history-status-copy {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.simple-history-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.simple-history-grid > div {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.simple-history-grid span {
    color: var(--muted);
    font-size: 12px;
}

.simple-history-grid b {
    font-size: 18px;
    overflow-wrap: anywhere;
}

.history-count {
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}

.history-empty-note {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-empty-note strong {
    font-size: 16px;
}

.history-empty-note span {
    color: var(--muted);
}

.history-simple-warning {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--soft);
    color: var(--text);
    line-height: 1.7;
}

.simple-send-notice b {
    min-width: 100px;
}

@media (max-width: 720px) {
    .simple-history-grid {
        grid-template-columns: 1fr;
    }

    .simple-history-grid > div {
        min-height: 70px;
    }

    .history-table,
    .history-recipient-table {
        overflow: visible;
    }

    .history-table table,
    .history-table tbody,
    .history-table tr,
    .history-table td,
    .history-recipient-table table,
    .history-recipient-table tbody,
    .history-recipient-table tr,
    .history-recipient-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .history-table thead,
    .history-recipient-table thead {
        display: none;
    }

    .history-table tr,
    .history-recipient-table tr {
        padding: 14px;
        margin-bottom: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #ffffff;
    }

    .history-table td,
    .history-recipient-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 7px 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .history-table td::before,
    .history-recipient-table td::before {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
    }

    .history-table td:nth-child(1)::before { content: "日時"; }
    .history-table td:nth-child(2)::before { content: "キャスト"; }
    .history-table td:nth-child(3)::before { content: "結果"; }
    .history-table td:nth-child(4)::before { content: "送信人数"; }
    .history-table td:nth-child(5)::before { content: "確認"; }

    .history-recipient-table td:nth-child(1)::before { content: "No."; }
    .history-recipient-table td:nth-child(2)::before { content: "お客様名"; }
    .history-recipient-table td:nth-child(3)::before { content: "お客様ID"; }

    .history-detail-btn {
        width: 100%;
    }

    .history-count {
        font-size: 18px;
    }
}


/* 2026-10-01 — 履歴の軽量化 / コンパクト表示 */
.compact-history-head {
    align-items: center;
    margin-bottom: 10px;
}
.compact-history-head h2 { margin: 0; }
.history-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 12px;
}
.history-more-btn {
    min-width: 180px;
    justify-content: center;
}
.history-more-wrap span {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 720px) {
    .history-page .panel-head { margin-bottom: 10px; }
    .history-page .panel-head h1 { font-size: 20px; margin-bottom: 3px; }
    .history-page .field-help { font-size: 11px; line-height: 1.45; }

    .history-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 8px;
        padding: 10px 11px;
        margin-bottom: 7px;
        border-radius: 10px;
    }
    .history-table td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        min-width: 0;
    }
    .history-table td::before { content: none !important; }
    .history-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.35;
    }
    .history-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        font-size: 14px;
        line-height: 1.35;
    }
    .history-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
    }
    .history-table td:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.35;
    }
    .history-table td:nth-child(4)::before {
        content: "送信 ";
        display: inline;
        color: var(--muted);
        font-size: 11px;
        font-weight: 400;
    }
    .history-table td:nth-child(5) {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        justify-self: end;
    }
    .history-detail-btn {
        width: auto;
        min-height: 30px;
        padding: 5px 9px;
        border-radius: 8px;
        font-size: 11px;
        line-height: 1.2;
    }

    .history-recipient-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 8px;
        padding: 8px 10px;
        margin-bottom: 5px;
        border-radius: 9px;
    }
    .history-recipient-table td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
    }
    .history-recipient-table td::before { content: none !important; }
    .history-recipient-table td:nth-child(1) { display: none; }
    .history-recipient-table td:nth-child(2) {
        grid-column: 1;
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .history-recipient-table td:nth-child(3) {
        grid-column: 2;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.35;
        text-align: right;
        overflow-wrap: anywhere;
    }
    .history-recipient-table td:nth-child(3)::before {
        content: "ID ";
        display: inline;
        color: var(--muted);
        font-size: 10px;
        font-weight: 400;
    }
    .history-more-wrap { padding-top: 9px; }
    .history-more-btn { width: 100%; min-height: 36px; }
    .simple-history-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 6px;
        margin-top: 12px;
    }
    .simple-history-grid > div {
        min-height: 0;
        padding: 9px;
    }
    .simple-history-grid span { font-size: 10px; }
    .simple-history-grid b { font-size: 13px; }
}

/* 2026-10-01 — 送信履歴UI 最終微調整 */
.history-more-form {
    margin: 0;
    width: auto;
}
.history-more-btn {
    appearance: none;
    cursor: pointer;
    min-height: 40px;
    padding: 9px 22px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.2;
}
.history-more-btn:hover {
    transform: translateY(-1px);
}
.history-more-btn:active {
    transform: translateY(0);
}
.history-table td,
.history-recipient-table td {
    vertical-align: middle;
}
.history-table td:first-child {
    white-space: nowrap;
}
.history-table td:nth-child(4) {
    white-space: nowrap;
}
.history-detail-btn {
    white-space: nowrap;
}
.history-page .panel-head {
    align-items: flex-start;
}
.history-page .panel-head .field-help {
    margin-top: 4px;
    display: none;
}

@media (min-width: 721px) {
    .history-more-wrap {
        padding-top: 14px;
    }
    .history-more-btn {
        min-width: 200px;
    }
    .history-table th,
    .history-table td {
        padding-top: 11px;
        padding-bottom: 11px;
    }
    .history-recipient-table th,
    .history-recipient-table td {
        padding-top: 9px;
        padding-bottom: 9px;
    }
}

@media (max-width: 720px) {
    .history-page {
        padding: 14px 12px;
    }
    .history-page .panel-head {
        margin-bottom: 8px;
    }
    .history-page .panel-head h1 {
        font-size: 18px;
        line-height: 1.35;
    }
    .history-page .field-help {
        margin-top: 2px;
        font-size: 10.5px;
        line-height: 1.4;
    }
    .history-table tr {
        gap: 2px 8px;
        padding: 9px 10px;
        margin-bottom: 6px;
        border-radius: 9px;
    }
    .history-table td:nth-child(1) {
        font-size: 9.5px;
    }
    .history-table td:nth-child(2) {
        font-size: 13px;
    }
    .history-table td:nth-child(3) .badge {
        padding: 4px 7px;
        font-size: 10px;
        line-height: 1.2;
    }
    .history-table td:nth-child(4) {
        font-size: 10.5px;
    }
    .history-detail-btn {
        min-height: 28px;
        padding: 4px 8px;
        border-radius: 7px;
        font-size: 10px;
    }
    .history-more-wrap {
        gap: 4px;
        padding-top: 8px;
    }
    .history-more-form {
        width: 100%;
    }
    .history-more-btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 13px;
    }
    .history-more-wrap span {
        font-size: 10px;
    }
    .history-recipient-table tr {
        padding: 7px 9px;
        margin-bottom: 4px;
    }
    .history-recipient-table td:nth-child(2) {
        font-size: 12.5px;
    }
    .history-recipient-table td:nth-child(3) {
        max-width: 42vw;
        font-size: 9.5px;
        word-break: break-all;
    }
    .simple-history-grid {
        gap: 5px;
    }
    .simple-history-grid > div {
        padding: 8px 7px;
        border-radius: 8px;
    }
    .simple-history-grid span {
        font-size: 9.5px;
    }
    .simple-history-grid b {
        font-size: 12px;
        line-height: 1.3;
    }
    #sent-customers .panel-head {
        align-items: center;
        gap: 8px;
    }
    #sent-customers .panel-head h2 {
        margin-bottom: 2px;
        font-size: 17px;
    }
    #sent-customers .field-help {
        font-size: 10px;
    }
    .history-count {
        font-size: 16px;
    }
}

/* Cast CSV import */
.import-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:700;margin:2px 0}
.import-or::before,.import-or::after{content:"";height:1px;background:var(--line);flex:1}

/* 2026-10-01: 送信画面の表ヘッダークリック並び替え */
.send-cast-table th.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.send-cast-table th.sortable-th:hover {
  background: rgba(42, 15, 26, 0.045);
}
.send-cast-table th.sortable-th:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}
.send-cast-table th.sortable-th .sort-indicator {
  display: inline-block;
  width: 1em;
  margin-left: .35em;
  opacity: .38;
  font-size: .85em;
  line-height: 1;
  vertical-align: middle;
}
.send-cast-table th.sortable-th .sort-indicator::before {
  content: "↕";
}
.send-cast-table th.sortable-th[aria-sort="ascending"] .sort-indicator,
.send-cast-table th.sortable-th[aria-sort="descending"] .sort-indicator {
  opacity: 1;
}
.send-cast-table th.sortable-th[aria-sort="ascending"] .sort-indicator::before {
  content: "↑";
}
.send-cast-table th.sortable-th[aria-sort="descending"] .sort-indicator::before {
  content: "↓";
}

/* 2026-10-01: 送信一覧のソート記号を明確化 */
.send-cast-table th.sortable-th .sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  margin-left: 7px;
  padding: 0 5px;
  border: 1px solid rgba(105, 71, 85, .28);
  border-radius: 6px;
  background: #ffffff;
  color: #8b6474;
  opacity: 1;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  vertical-align: middle;
  box-sizing: border-box;
}
.send-cast-table th.sortable-th .sort-indicator::before {
  content: "▲▼";
}
.send-cast-table th.sortable-th:hover .sort-indicator {
  border-color: rgba(235, 37, 116, .45);
  color: #eb2574;
}
.send-cast-table th.sortable-th[aria-sort="ascending"] .sort-indicator,
.send-cast-table th.sortable-th[aria-sort="descending"] .sort-indicator {
  border-color: #eb2574;
  background: #eb2574;
  color: #ffffff;
  letter-spacing: 0;
}
.send-cast-table th.sortable-th[aria-sort="ascending"] .sort-indicator::before {
  content: "▲";
}
.send-cast-table th.sortable-th[aria-sort="descending"] .sort-indicator::before {
  content: "▼";
}

/* オキニトーク送信：設定・送信を明確な操作ボタンとして表示 */
.okini-send-table .okini-setting-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: #eb2574;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(42, 15, 26, .12);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.okini-send-table .okini-setting-send-btn:hover {
  background: #d81d68;
  box-shadow: 0 3px 8px rgba(235, 37, 116, .22);
  transform: translateY(-1px);
}
.okini-send-table .okini-setting-send-btn:active {
  transform: translateY(0);
}
.okini-send-table .okini-setting-send-btn:focus-visible {
  outline: 3px solid rgba(235, 37, 116, .28);
  outline-offset: 2px;
}

/* Cast registration / CSV import: compact collapsible panels */
.collapsible-form-panel {
    padding: 0;
    overflow: hidden;
}

.collapsible-form-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: #362029;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.collapsible-form-panel > summary::-webkit-details-marker {
    display: none;
}

.collapsible-form-panel > summary::marker {
    content: "";
}

.collapsible-form-panel > summary:hover {
    background: #fcf8fa;
}

.collapsible-form-panel > summary:focus-visible {
    outline: 3px solid rgba(234, 47, 122, .18);
    outline-offset: -3px;
}

.collapsible-form-icon {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid #ead7df;
    border-radius: 8px;
    background: #ffffff;
}

.collapsible-form-icon::before,
.collapsible-form-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #674754;
    transform: translate(-50%, -50%);
    transition: transform .18s ease;
}

.collapsible-form-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.collapsible-form-panel[open] .collapsible-form-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.collapsible-form-panel[open] > summary {
    border-bottom: 1px solid var(--line);
}

.collapsible-form-body {
    padding: 22px;
}

.collapsible-form-body .field-help:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .collapsible-form-panel > summary {
        min-height: 54px;
        padding: 15px 16px;
        font-size: 17px;
    }

    .collapsible-form-body {
        padding: 16px;
    }

    .collapsible-form-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}

/* Cast register: open manual registration + CSV import together */
.collapsible-form-titles {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.collapsible-form-divider {
    color: var(--muted);
    font-weight: 700;
}
.cast-register-combined-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}
.cast-register-subpanel {
    min-width: 0;
    padding: 4px 0 0;
}
.cast-register-subpanel + .cast-register-subpanel {
    border-left: 1px solid var(--line);
    padding-left: 20px;
}
.cast-register-subpanel h2 {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.4;
}
@media (max-width: 760px) {
    .collapsible-form-titles {
        gap: 7px;
        flex-wrap: wrap;
    }
    .cast-register-combined-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .cast-register-subpanel + .cast-register-subpanel {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 18px;
    }
}

/* Individual scheduled send */
.row-action-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.schedule-send-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid #eb2574;border-radius:8px;background:#ffffff;color:#eb2574!important;font-size:13px;font-weight:800;line-height:1.2;text-decoration:none!important;white-space:nowrap}
.schedule-send-btn:hover{background:#ffeff5}
.schedule-panel{max-width:760px}
.schedule-form{max-width:620px}
.schedule-form input[type="datetime-local"]{max-width:320px}
.schedule-submit{width:auto;min-width:220px}
@media(max-width:767px){.row-action-buttons{align-items:stretch}.row-action-buttons>a{flex:1}.schedule-submit{width:100%}}

/* オキニトーク送信：設定・送信 / 予約送信を常に横並び */
.okini-send-table .row-action-buttons {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: max-content;
  white-space: nowrap;
}
.okini-send-table .row-action-buttons > a {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .okini-send-table .row-action-buttons {
    flex-wrap: nowrap;
    width: max-content;
  }
  .okini-send-table .row-action-buttons > a {
    flex: 0 0 auto;
  }
}

/* 2026-10-01: ミテネ / オキニトーク送信一覧をPC画面内に収める */
@media (min-width: 768px) {
  .send-cast-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .send-cast-table th,
  .send-cast-table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* 共通列幅 */
  .send-cast-table th:nth-child(1),
  .send-cast-table td:nth-child(1) { width: 38px; }
  .send-cast-table th:nth-child(2),
  .send-cast-table td:nth-child(2) { width: 106px; }
  .send-cast-table th:nth-child(3),
  .send-cast-table td:nth-child(3) { width: 82px; }
  .send-cast-table th:nth-child(4),
  .send-cast-table td:nth-child(4) { width: 76px; }
  .send-cast-table th:nth-child(5),
  .send-cast-table td:nth-child(5) { width: 78px; }
  .send-cast-table th:nth-child(6),
  .send-cast-table td:nth-child(6) { width: 128px; }

  /* ソート記号も見やすさを保ったまま省スペース化 */
  .send-cast-table th.sortable-th .sort-indicator {
    min-width: 22px;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
  }

  /* オキニトーク：操作列をコンパクトにして2ボタンを必ず横並び */
  .okini-send-table th:nth-child(7),
  .okini-send-table td:nth-child(7) {
    width: 192px;
  }
  .okini-send-table .row-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap !important;
    gap: 5px;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }
  .okini-send-table .okini-setting-send-btn,
  .okini-send-table .schedule-send-btn {
    flex: 0 0 auto !important;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 0 9px;
    border-radius: 7px;
    white-space: nowrap;
  }
  .okini-send-table .okini-setting-send-btn { width: 96px; }
  .okini-send-table .schedule-send-btn { width: 84px; }

  /* ミテネ：送信操作を1行のまま省スペース化 */
  .send-cast-table:not(.okini-send-table) th:nth-child(4),
  .send-cast-table:not(.okini-send-table) td:nth-child(4) { width: 58px; }
  .send-cast-table:not(.okini-send-table) th:nth-child(5),
  .send-cast-table:not(.okini-send-table) td:nth-child(5) { width: 74px; }
  .send-cast-table:not(.okini-send-table) th:nth-child(6),
  .send-cast-table:not(.okini-send-table) td:nth-child(6) { width: 122px; }
  .send-cast-table:not(.okini-send-table) th:nth-child(7),
  .send-cast-table:not(.okini-send-table) td:nth-child(7) {/* width: 575px; */}

  .send-cast-table:not(.okini-send-table) td.actions {
    white-space: nowrap;
    overflow: visible;
  }
  .send-cast-table:not(.okini-send-table) td.actions .run-controls {
    display: inline-grid;
    grid-template-columns: 120px 60px 92px;
    gap: 4px;
    width: 298px;
    margin-right: 5px;
    vertical-align: middle;
  }
  .send-cast-table:not(.okini-send-table) .run-controls .compact-select {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 3px;
  }
  .send-cast-table:not(.okini-send-table) .run-controls button {
    width: 92px;
    min-width: 92px;
    height: 36px;
    padding: 0 4px;
  }
  .send-cast-table:not(.okini-send-table) td.actions > .schedule-send-btn {
    width: 84px;
    min-width: 84px;
    min-height: 36px;
    height: 36px;
    padding: 0 5px;
    vertical-align: middle;
  }
}

/* スマホは読みやすさを優先し、表だけ横スクロール */
@media (max-width: 767px) {
  .okini-send-table .row-action-buttons {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 6px;
    width: max-content;
  }
  .okini-send-table .row-action-buttons > a {
    flex: 0 0 auto !important;
    width: auto;
  }
}

/* 2026-10-01: ミテネ / オキニトーク送信ページは利用可能な横幅を100%使用 */
@media (min-width: 768px) {
  .app-main main:has(.send-cast-table) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .app-main main:has(.send-cast-table) > .panel,
  .app-main main:has(.send-cast-table) .cast-table-wrap,
  .app-main main:has(.send-cast-table) .send-cast-table {
    width: 100%;
    max-width: 100%;
  }
}