html,
body {
    height: 100%;
    min-height: 100%;
}

body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background-color: #fffaf0;
    /* Creamy background */
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 20px 20px;
}

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

.app-root-shell {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
    max-height: 100vh;
    max-height: 100dvh;
    max-height: calc(var(--vh, 1vh) * 100);
    padding-top: var(--safe-top);
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    box-sizing: border-box;
}

@supports (height: 100dvh) {
    .app-root-shell {
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
    }
}

.app-root-shell > * {
    min-height: 0;
}

#app,
#board-container {
    min-height: 0;
}

#app {
    height: 100%;
    max-height: 100%;
}

#desktop-sidebar {
    min-height: 0;
}

.safe-area-pb {
    padding-bottom: max(0.75rem, var(--safe-bottom));
}

.board-mobile-safe {
    padding-bottom: calc(7rem + var(--safe-bottom));
}

@media (min-width: 768px) {
    #desktop-sidebar {
        position: sticky;
        top: var(--safe-top);
        align-self: flex-start;
        height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
        max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
        overflow: hidden;
    }

    @supports not (height: 100dvh) {
        #desktop-sidebar {
            height: calc(100vh - var(--safe-top) - var(--safe-bottom));
            max-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
        }
    }
}

.app-modal-overlay {
    padding-top: max(0.75rem, var(--safe-top));
    padding-right: max(0.75rem, var(--safe-right));
    padding-bottom: max(0.75rem, var(--safe-bottom));
    padding-left: max(0.75rem, var(--safe-left));
}

/* モーダルパネルの高さ制御 - dvh (dynamic viewport height) 対応 */
.app-modal-panel {
    width: min(100%, 42rem);
    max-height: 85vh;
    /* 90dvhから変更: PCで見切れるのを防ぐ */
    /* iOS Chrome の動的アドレスバーに対応 */
    box-sizing: border-box;
}

/* dvh 未対応ブラウザ用フォールバック */
@supports not (height: 1dvh) {
    .app-modal-panel {
        max-height: 90svh;
        /* svh フォールバック */
    }
}

@supports not (height: 1svh) {
    .app-modal-panel {
        max-height: calc(90 * var(--vh, 1vh));
    }
}

/* カンバンカラムのヘッダーボタンが確実にクリックできるように調整 */
.kanban-col-header button {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
}

.app-modal-content {
    padding-bottom: max(0.5rem, var(--safe-bottom));
    /* iOS で慣性スクロールを有効化 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.app-modal-footer {
    padding-bottom: max(1rem, var(--safe-bottom));
}

.app-modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: inherit;
}

/* モバイル（スマホ）：底面から出るシート型 */
@media (max-width: 767px) {
    .app-modal-panel {
        width: 100%;
        min-height: 0;
        /* モバイルではビューポートの95%まで使えるように */
        max-height: 95dvh;
        border-top-left-radius: 1.75rem;
        border-top-right-radius: 1.75rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    @supports not (height: 1dvh) {
        .app-modal-panel {
            max-height: 95svh;
        }
    }

    @supports not (height: 1svh) {
        .app-modal-panel {
            max-height: calc(95 * var(--vh, 1vh));
        }
    }

    /* モバイルでオーバーレイが bottom から出るタイプの場合、上のパディングを最小化 */
    .app-modal-overlay {
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
    }
}

/* タブレット（iPad mini など 768〜1024px）対応 */
@media (min-width: 768px) and (max-width: 1024px) {
    .app-modal-panel {
        width: min(100%, 48rem);
        max-height: 90dvh;
    }

    @supports not (height: 1dvh) {
        .app-modal-panel {
            max-height: 90svh;
        }
    }
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.kanban-col {
    min-height: 200px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

@media (max-width: 767px) {
    .kanban-col {
        overscroll-behavior-y: auto;
    }
}

#board-container > .flex,
#wrapper-todo,
#wrapper-doing,
#wrapper-pending,
#wrapper-done,
#col-todo,
#col-doing,
#col-pending,
#col-done {
    min-height: 0;
}

#board-container {
    -webkit-overflow-scrolling: touch;
}

.stamp-done {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    border: 3px solid #fca5a5;
    border-radius: 50%;
    color: #fca5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    transform: rotate(-15deg);
    opacity: 0.8;
    pointer-events: none;
    z-index: 10;
}

.stamp-done::after {
    content: "すごい！";
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Mobile Tab Active State */
.tab-active {
    border-bottom: 3px solid #ec4899;
    color: #ec4899;
    font-weight: bold;
}

.tab-inactive {
    color: #9ca3af;
}

/* 強制的な幅調整 */
input[type="time"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    appearance: none;
    -webkit-appearance: none;
}

/* Quill custom styles */
.ql-container.ql-snow {
    border: none !important;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 14px;
}

.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid #fed7aa !important;
    background: #fff;
    border-radius: 12px 12px 0 0;
}

.editor-container {
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

#edit-task-editor,
#task-editor,
#edit-task-editor .ql-container,
#task-editor .ql-container,
#edit-task-editor .ql-editor,
#task-editor .ql-editor {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#edit-task-editor .ql-editor,
#task-editor .ql-editor {
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: hidden;
}

#edit-task-editor .ql-editor > *,
#edit-task-editor .ql-editor p,
#edit-task-editor .ql-editor div,
#edit-task-editor .ql-editor span,
#edit-task-editor .ql-editor ul,
#edit-task-editor .ql-editor ol,
#edit-task-editor .ql-editor li,
#edit-task-editor .ql-editor blockquote,
#edit-task-editor .ql-editor h1,
#edit-task-editor .ql-editor h2,
#edit-task-editor .ql-editor h3,
#edit-task-editor .ql-editor h4,
#edit-task-editor .ql-editor h5,
#edit-task-editor .ql-editor h6,
#task-editor .ql-editor > *,
#task-editor .ql-editor p,
#task-editor .ql-editor div,
#task-editor .ql-editor span,
#task-editor .ql-editor ul,
#task-editor .ql-editor ol,
#task-editor .ql-editor li,
#task-editor .ql-editor blockquote,
#task-editor .ql-editor h1,
#task-editor .ql-editor h2,
#task-editor .ql-editor h3,
#task-editor .ql-editor h4,
#task-editor .ql-editor h5,
#task-editor .ql-editor h6 {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#edit-task-editor .ql-editor img,
#edit-task-editor .ql-editor video,
#edit-task-editor .ql-editor iframe,
#edit-task-editor .ql-editor embed,
#edit-task-editor .ql-editor object,
#task-editor .ql-editor img,
#task-editor .ql-editor video,
#task-editor .ql-editor iframe,
#task-editor .ql-editor embed,
#task-editor .ql-editor object {
    display: block;
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box;
}

#edit-task-editor .ql-editor pre,
#edit-task-editor .ql-editor code,
#task-editor .ql-editor pre,
#task-editor .ql-editor code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: auto;
}

/* モバイルではエディタ高さを抑えてスクロール操作性を確保 */
@media (max-width: 767px) {

    #edit-task-editor,
    #task-editor {
        height: 100px !important;
    }
}

.view-task-memo-body {
    min-height: 96px;
    padding: 16px !important;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
}

.view-task-memo-body a {
    color: #4f46e5;
    text-decoration: underline;
    pointer-events: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.view-task-memo-body>*,
.view-task-memo-body p,
.view-task-memo-body div,
.view-task-memo-body span,
.view-task-memo-body ul,
.view-task-memo-body ol,
.view-task-memo-body li,
.view-task-memo-body blockquote,
.view-task-memo-body h1,
.view-task-memo-body h2,
.view-task-memo-body h3,
.view-task-memo-body h4,
.view-task-memo-body h5,
.view-task-memo-body h6 {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
}

.view-task-memo-body img,
.view-task-memo-body video,
.view-task-memo-body iframe,
.view-task-memo-body embed,
.view-task-memo-body object {
    display: block;
    max-width: 100% !important;
    width: min(100%, auto);
    height: auto;
    box-sizing: border-box;
}

.view-task-memo-body iframe,
.view-task-memo-body .ql-video {
    width: 100% !important;
    max-width: 100% !important;
}

.view-task-memo-body pre,
.view-task-memo-body code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.view-task-memo-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.view-task-memo-body table td,
.view-task-memo-body table th {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 選択モード関連 */
.card-selected {
    box-shadow: 0 0 0 4px #818cf8;
    transform: scale(0.96);
    opacity: 0.9;
}

/* 長押しを安定させるための設定 */
.task-card {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.task-card>* {
    min-width: 0;
    max-width: 100%;
}

.task-card h3,
.task-card .task-card-memo-preview,
.task-card button,
.task-card span,
.task-card div {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-card-memo-preview {
    white-space: normal;
}

.kanban-col,
#wrapper-todo,
#wrapper-doing,
#wrapper-pending,
#wrapper-done {
    min-width: 0;
}

.selected-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #818cf8;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    z-index: 20;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#bulk-action-bar.show,
#trash-bulk-action-bar.show-trash {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

#bulk-action-bar {
    bottom: calc(2.5rem + var(--safe-bottom));
}

#board-footer-mobile {
    padding-bottom: calc(6rem + var(--safe-bottom));
}

#board-footer,
#board-footer-mobile {
    position: relative;
    pointer-events: auto;
}

#board-footer a,
#board-footer-mobile a {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

@media (min-width: 768px) {
    #bulk-action-bar {
        bottom: 2.5rem;
    }
}

@keyframes bounce-short {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.animate-bounce-short {
    animation: bounce-short 0.5s ease-in-out infinite;
}

/* サービス停止画面表示時の強制非表示 */


body.is-stopped #desktop-sidebar,
body.is-stopped #mobile-nav,
body.is-stopped #board-footer,
body.is-stopped #board-footer-mobile,
body.is-stopped header {
    display: none !important;
}