/* Shared light UI for AVECME Blade pages, following the B24 UI design direction. */
:root { --service-bg: #f2f5f8; --service-text: #333b46; --service-muted: #687787; --service-line: #e3e8ee; --service-focus: #0075e1; }
body.avecme-ui { background: var(--service-bg); color: var(--service-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size: 14px; line-height: 1.5; }
.avecme-ui *, .avecme-ui *::before, .avecme-ui *::after { box-sizing: border-box; }
.avecme-ui button, .avecme-ui input, .avecme-ui select, .avecme-ui textarea { font-family: inherit !important; }
.avecme-ui h1, .avecme-ui h2, .avecme-ui .accesses__title { color: #202b38; font-weight: 650; letter-spacing: -.5px; line-height: 1.25; }
.avecme-ui h1 { font-size: 28px; margin-bottom: 24px; }
.avecme-ui h2, .avecme-ui .accesses__title { font-size: 22px; margin-bottom: 20px; }
.avecme-ui a { color: #0068c8; }
.avecme-ui a:focus-visible { outline: 3px solid #0075e155; outline-offset: 3px; }
.avecme-ui .header { width: 248px; padding: 28px 16px; background: #fff; border-right: 1px solid var(--service-line); overflow-y: auto; }
.avecme-ui .header .container { padding: 0; width: 100%; }
.avecme-ui .header__logo { display: flex; align-items: center; gap: 8px; padding: 8px 12px 24px; color: #263445; font-size: 20px; font-weight: 750; letter-spacing: 1px; }
.avecme-ui .header__logo img { width: 48px; max-width: 100%; height: 48px; object-fit: contain; }
.avecme-ui .header__menu { margin-top: 8px; }
.avecme-ui .header__menu li { margin: 0 0 6px; }
.avecme-ui .header__menu li a { min-height: 44px; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.4; font-weight: 500; color: #526172; gap: 4px; }
.avecme-ui .header__menu li a svg { flex-shrink: 0; width: 20px; height: 20px; }
.avecme-ui .header__menu li a svg use { color: currentColor; }
.avecme-ui .header__menu li a:hover { background: #f3f6fa; color: #0068c8; }
.avecme-ui .header__menu li.active a { background: #eaf3ff; color: #0068c8; font-weight: 600; }
.avecme-ui .header__menu .logout { width: 100%; margin-top: 16px; }
.avecme-ui .content { padding: 32px 32px 80px 280px; min-width: 0; }
.avecme-ui .content > :is(.setting-lk, .accesses, .text), .avecme-ui .setting__step { background: #fff; border: 1px solid var(--service-line); border-radius: 14px; padding: 28px; box-shadow: 0 4px 20px #18365005; }
.avecme-ui .content > .setting-lk { max-width: 760px; }
.avecme-ui .text p { font-size: 15px; line-height: 1.75; color: var(--service-text); }
.avecme-ui .setting-lk__inner { max-width: 520px; }
.avecme-ui .setting-lk__cell { margin-bottom: 20px; }
.avecme-ui .setting-lk__cell label, .avecme-ui .setting__cell label { margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: #424e5c; }
.avecme-ui :is(.input, .form-control, .filter-el, textarea), .avecme-ui .select select { border: 1px solid #d5dce3; border-radius: 8px; background-color: #fff; color: #202b38; font-size: 14px; line-height: 1.5; padding: 10px 12px; box-shadow: 0 1px 2px #18365005; }
.avecme-ui input.input, .avecme-ui .select select { height: 44px; min-height: 44px; }
.avecme-ui :is(.input, .form-control, .filter-el, textarea):focus, .avecme-ui .select select:focus { border-color: var(--service-focus); outline: none; box-shadow: 0 0 0 3px #0075e124; }
.avecme-ui :is(input, select, textarea):disabled { background-color: #f3f5f7; color: #687787; }
.avecme-ui .button-primary, .avecme-ui .btn, .avecme-ui .verify-phone-link, .avecme-ui .send-email-link { border-radius: 8px; padding: 10px 18px; min-height: 40px; font-size: 14px; line-height: 1.5; font-weight: 600; text-transform: none; letter-spacing: normal; border: 0; }
.avecme-ui .button-primary:hover { opacity: 1; }
.avecme-ui .data__inner { padding: 24px; min-width: 0; }
.avecme-ui .main > .data { margin: 28px 28px 32px 276px; }
.avecme-ui .main > h2 { margin: 32px 28px 0 276px; }
.avecme-ui .data { background: white; border: 1px solid var(--service-line); border-radius: 14px; }
.avecme-ui .data__table { margin-top: 20px; border: 1px solid var(--service-line); border-radius: 10px; scrollbar-color: #c2ccd6 #f4f6f8; }
.avecme-ui .data__table:first-child { margin-top: 0; }
.avecme-ui .data__table > h2 { padding: 16px; margin: 0; }
.avecme-ui.log-viewer-ui .container-fluid { padding: 28px; }
.avecme-ui.log-viewer-ui .table-container { background: white; border: 1px solid var(--service-line); border-radius: 12px; padding: 16px; }
.avecme-ui.log-viewer-ui .table th { background: #f7f9fb; color: #526172; border-bottom: 1px solid var(--service-line); }
.avecme-ui .data__table table { font-size: 14px; }
.avecme-ui .data__table table tr th, .avecme-ui .data__table table tr td { padding: 14px 16px; border: 0; border-bottom: 1px solid #e9edf2; }
.avecme-ui .data__table table tr th { background: #f7f9fb; color: #526172; }
.avecme-ui .data__table table tr .title { color: #526172; font-size: 13px; font-weight: 600; }
.avecme-ui .data__table table tr .tit, .avecme-ui .data__table table tr .mail, .avecme-ui .data__table table tr .tel { font-size: 14px; line-height: 1.5; }
.avecme-ui .data__table .service-name { font-size: 14px; line-height: 1.5; }
.avecme-ui .data__table tbody tr:hover { background: #f8fbff; }
.avecme-ui .data__table table tr .in { display: block; }
.avecme-ui .data__table table tr .in input { height: 38px; border-radius: 7px; }
.avecme-ui .data__table table tr .in .button { top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; }
.avecme-ui .data__table table tr .in .button svg { width: 18px; height: 18px; }
.avecme-ui .data__table table tr .dr__link { padding: 6px 10px; border-radius: 7px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.avecme-ui .accesses__in-title { font-size: 16px; line-height: 1.5; }
.avecme-ui .accesses__table { overflow-x: auto; }
.avecme-ui .accesses__table table { width: 100%; border-collapse: collapse; }
.avecme-ui .accesses__table th, .avecme-ui .accesses__table td { padding: 14px; border-bottom: 1px solid var(--service-line); font-size: 14px; }
.avecme-ui .pagination { display: flex; gap: 6px; margin-top: 20px; }
.avecme-ui .pagination .page-link { border: 1px solid var(--service-line); border-radius: 7px; padding: 7px 12px; background: white; color: #526172; }
.avecme-ui .pagination .active .page-link { background: #eaf3ff; color: #0068c8; border-color: #c2ddff; }
.avecme-ui .unverified-banners { position: static; width: auto; margin: 20px 32px 0 280px; border: 1px solid #f0dba8; border-radius: 10px; overflow: hidden; }
.avecme-ui .unverified { background: #fff8e8; color: #795b23; text-align: left; padding: 10px 16px; font-size: 13px; line-height: 1.55; }
.avecme-ui .unverified + .unverified { border-top: 1px solid #f0e5c8; }
.avecme-ui .page { height: auto; min-height: 100vh; padding: 48px 20px 100px; background: var(--service-bg); }
.avecme-ui .page__inner { width: 520px; max-width: 100%; margin: auto; padding: 36px 40px; border: 1px solid var(--service-line); border-radius: 18px; box-shadow: 0 8px 32px #1836500a; }
.avecme-ui .page__inner .setting-lk { max-width: none; }
.avecme-ui .page__inner .setting-lk__inner { max-width: none; }
.avecme-ui .auth-brand { display: inline-block; margin-bottom: 24px; color: #263445; font-size: 20px; font-weight: 750; letter-spacing: 1px; }
.avecme-ui .auth-brand span { color: #c71585; }
.avecme-ui .auth-description { margin: -12px 0 28px; color: var(--service-muted); font-size: 15px; }
.avecme-ui .auth-forgot { display: inline-block; margin-top: 10px; font-size: 13px; }
.avecme-ui .auth-actions { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.avecme-ui .page__inner .auth-actions .button { width: 100%; max-width: none; min-height: 46px; }
.avecme-ui.connections-full-width .main > .data { margin-left: 28px; }
.avecme-ui.connections-full-width .unverified-banners { margin-left: 32px; }
.avecme-ui .admin-connection-tabs { display: flex; gap: 6px; margin: 24px 28px 0; padding: 5px; width: fit-content; max-width: calc(100% - 56px); border: 1px solid var(--service-line); border-radius: 10px; background: #e9eef4; }
.avecme-ui .admin-connection-tabs a { padding: 10px 18px; border-radius: 7px; color: #526172; font-size: 14px; font-weight: 600; text-decoration: none; }
.avecme-ui .admin-connection-tabs a:hover { color: #0068c8; }
.avecme-ui .admin-connection-tabs a.is-active { background: #fff; color: #0068c8; box-shadow: 0 1px 4px #18365012; }
@media (max-width: 991px) {
    .avecme-ui .admin-connection-tabs { margin: 20px 16px 0; max-width: calc(100% - 32px); }
    .avecme-ui .admin-connection-tabs a { padding: 10px 14px; }
    .avecme-ui .header { position: relative; width: 100%; height: auto; padding: 12px 20px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--service-line); }
    .avecme-ui .header__inner { flex-wrap: wrap; }
    .avecme-ui .header__logo { width: 125px; padding: 4px 0; }
    .avecme-ui .header__toggler { display: block; margin-left: auto; padding: 10px; border: 0; border-radius: 6px; }
    .avecme-ui .header__toggler span { background: #526172; }
    .avecme-ui .header__menu { display: none; order: 2; position: static; width: 100%; padding: 16px 0 0; background: #fff; }
    .avecme-ui .header__menu.open { display: block; }
    .avecme-ui .header__menu li { margin: 0 0 6px; }
    .avecme-ui .content { padding: 24px 16px 80px; }
    .avecme-ui .main > .data { margin: 20px 16px; }
    .avecme-ui .main > h2 { margin: 24px 16px 0; }
    .avecme-ui .unverified-banners { margin: 12px 16px; }
    .avecme-ui.connections-full-width .main > .data { margin-left: 16px; }
    .avecme-ui.connections-full-width .unverified-banners { margin-left: 16px; }
    .avecme-ui .data__inner { padding: 16px; }
    .avecme-ui .content > :is(.setting-lk, .accesses, .text), .avecme-ui .setting__step { padding: 20px; }
}
@media (max-width: 480px) {
    .avecme-ui .page { padding: 16px 12px 100px; }
    .avecme-ui .page__inner { padding: 28px 22px; }
    .avecme-ui h1 { font-size: 25px; }
    .avecme-ui .accesses__in-sel { flex-wrap: wrap; gap: 12px; }
    .avecme-ui .accesses__in-sel .select { margin-right: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .avecme-ui * { transition: none !important; }
}

/* Deletion is a separate icon action after the integration status. */
.avecme-ui .connection-row { display: flex; align-items: center; gap: 16px; }
.avecme-ui .connection-row > .setting__cell { margin: 0; padding: 0; min-width: 0; order: 0; }
.avecme-ui .connection-row > .setting__cell_on { flex: 1.4; width: auto; }
.avecme-ui .connection-row > .setting__cell_tw { flex: 1; width: auto; }
.avecme-ui .connection-row > .setting__cell_th { flex: 0 0 150px; width: auto; }
.avecme-ui .connection-row > .setting__cell_fr { flex: 1.2; width: auto; }
.avecme-ui .connection-delete-cell { flex: 0 0 44px; }
.avecme-ui .connection-delete-trigger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; border-radius: 8px; }
body .connection-delete-trigger.icon-button:hover { color: #c71585 !important; }
.avecme-ui .connection-delete-dialog { margin: auto; width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 28px; border: 1px solid #dce4ed; border-radius: 20px; color: #253545; background: #fff; box-shadow: 0 24px 80px #172b4d33; }
.connection-delete-dialog::backdrop { background: #172b4d88; }
.avecme-ui .connection-delete-dialog h2 { margin: 0 0 16px; }
.avecme-ui .connection-delete-dialog p { margin: 0 0 16px; line-height: 1.6; overflow-wrap: anywhere; }
.avecme-ui .connection-delete-dialog label { display: block; margin: 20px 0 8px; line-height: 1.5; }
.avecme-ui .connection-delete-dialog input { width: 100%; }
.avecme-ui .connection-delete-actions { display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
@media (max-width: 1100px) {
    .avecme-ui .connection-row { flex-wrap: wrap; }
    .avecme-ui .connection-row > .setting__cell_on, .avecme-ui .connection-row > .setting__cell_tw { flex: 1 1 40%; }
    .avecme-ui .connection-row > .setting__cell_fr { flex: 1 1 150px; }
}