/* danbako Cardboard Box Theme */

/* ===== Color Palette ===== */
:root {
  --cardboard: #c4956a;
  --cardboard-light: #dbb896;
  --cardboard-lighter: #f0dcc6;
  --cardboard-dark: #8b6941;
  --cardboard-darker: #6b4f30;
  --tape: #d4c9a8;
  --tape-border: #b8a87a;
  --ink: #3d2b1f;
  --ink-light: #6b5344;
  --ink-lighter: #8b7364;
  --marker-blue: #4a7fb5;
  --marker-red: #c45a4a;
  --marker-green: #5a9e6f;
  --marker-yellow: #d4a843;
  --paper: #faf6f0;
  --paper-lines: #e8ddd0;
  --bg: #f5ece0;
  --shadow: rgba(107, 79, 48, 0.15);
}

.dark {
  --cardboard: #6b5030;
  --cardboard-light: #8b6841;
  --cardboard-lighter: #4a3828;
  --cardboard-dark: #5a4028;
  --cardboard-darker: #3a2818;
  --tape: #4a3f30;
  --tape-border: #6a5f50;
  --ink: #e8ddd0;
  --ink-light: #c4b8a8;
  --ink-lighter: #9a8e7e;
  --paper: #3a2f25;
  --paper-lines: #4a3f35;
  --bg: #2a2118;
  --shadow: rgba(0, 0, 0, 0.3);
}

/* ===== Typography ===== */
.font-yomogi {
  font-family: 'Yomogi', cursive;
}

.font-zen-maru {
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* ===== Body Background ===== */
body.cardboard-theme {
  background-color: var(--bg) !important;
  font-family: 'Zen Maru Gothic', sans-serif;
  color: var(--ink);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(196, 149, 106, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(196, 149, 106, 0.08) 0%, transparent 50%);
}

/* ===== Navigation (Cardboard tape style) ===== */
.cardboard-nav {
  background: linear-gradient(180deg, var(--cardboard) 0%, var(--cardboard-dark) 100%) !important;
  border-bottom: 3px solid var(--cardboard-darker) !important;
  box-shadow: 0 2px 8px var(--shadow) !important;
  position: relative;
}

.cardboard-nav::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 8px,
    var(--cardboard-darker) 8px,
    var(--cardboard-darker) 10px
  );
}

.cardboard-nav .nav-logo {
  font-family: 'Yomogi', cursive !important;
  color: var(--paper) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.cardboard-nav .nav-link-item {
  color: var(--cardboard-lighter) !important;
}

.cardboard-nav .nav-link-item:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--paper) !important;
}

/* Mobile menu in nav */
.cardboard-nav .cardboard-mobile-menu {
  background: linear-gradient(180deg, var(--cardboard-dark) 0%, var(--cardboard-darker) 100%) !important;
  border-top: 1px solid var(--cardboard-darker) !important;
}

/* ===== Dropdown menus in cardboard theme ===== */
.cardboard-dropdown {
  background: var(--paper) !important;
  border-color: var(--paper-lines) !important;
}

.cardboard-dropdown a,
.cardboard-dropdown button {
  color: var(--ink-light) !important;
}

.cardboard-dropdown a:hover,
.cardboard-dropdown button:hover {
  background: var(--cardboard-lighter) !important;
}

/* ===== Flash Messages (Craft paper style) ===== */
.cardboard-flash-success {
  background: rgba(90, 158, 111, 0.15) !important;
  border: 1.5px dashed var(--marker-green) !important;
  color: var(--marker-green) !important;
}

.cardboard-flash-error {
  background: rgba(196, 90, 74, 0.15) !important;
  border: 1.5px dashed var(--marker-red) !important;
  color: var(--marker-red) !important;
}

/* ===== Note Cards (Notebook paper style) ===== */
.cardboard-note-card {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
  border-radius: 2px !important;
  box-shadow: 1px 2px 6px var(--shadow) !important;
  position: relative;
  background-image:
    linear-gradient(var(--paper-lines) 1px, transparent 1px) !important;
  background-size: 100% 1.6rem !important;
  background-position: 0 1rem !important;
}

.cardboard-note-card:hover {
  transform: translateY(-1px) rotate(0.2deg) !important;
  box-shadow: 2px 4px 12px var(--shadow) !important;
  border-color: var(--cardboard-light) !important;
}

.cardboard-note-card::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--marker-red);
  opacity: 0.3;
  z-index: 1;
}

.cardboard-note-card.pinned-card {
  border-left: 3px solid var(--marker-yellow) !important;
  background: linear-gradient(135deg, #fffef5 0%, var(--paper) 100%) !important;
}

.dark .cardboard-note-card.pinned-card {
  background: linear-gradient(135deg, rgba(212, 168, 67, 0.1) 0%, var(--paper) 100%) !important;
}

.cardboard-note-card.pinned-card .pin-emoji {
  position: absolute;
  top: -0.4rem;
  right: 0.5rem;
  font-size: 1rem;
  transform: rotate(15deg);
  z-index: 2;
}

.cardboard-note-card .note-card-title {
  font-family: 'Yomogi', cursive !important;
}

.cardboard-note-card:hover .note-card-title {
  color: var(--cardboard-dark) !important;
}

.dark .cardboard-note-card:hover .note-card-title {
  color: var(--cardboard-light) !important;
}

/* ===== Note card avatar (cardboard style) ===== */
.cardboard-avatar {
  background: linear-gradient(135deg, var(--cardboard) 0%, var(--cardboard-dark) 100%) !important;
}

/* ===== Tags (Marker pen style) ===== */
.cardboard-tag {
  font-family: 'Yomogi', cursive !important;
  border-radius: 3px !important;
  border: 1px solid !important;
}

.cardboard-tag:nth-child(3n+1) {
  color: var(--marker-blue) !important;
  border-color: var(--marker-blue) !important;
  background: rgba(74, 127, 181, 0.08) !important;
  transform: rotate(-1deg);
}

.cardboard-tag:nth-child(3n+2) {
  color: var(--marker-green) !important;
  border-color: var(--marker-green) !important;
  background: rgba(90, 158, 111, 0.08) !important;
  transform: rotate(0.5deg);
}

.cardboard-tag:nth-child(3n) {
  color: var(--marker-red) !important;
  border-color: var(--marker-red) !important;
  background: rgba(196, 90, 74, 0.08) !important;
  transform: rotate(-0.5deg);
}

/* ===== Search Bar (Masking tape style) ===== */
.cardboard-search {
  background: var(--tape) !important;
  border: 1.5px dashed var(--tape-border) !important;
  border-radius: 6px !important;
  transform: rotate(-0.3deg);
}

.cardboard-search input,
.cardboard-search select {
  font-family: 'Yomogi', cursive !important;
  background: transparent !important;
  border-color: var(--tape-border) !important;
}

.cardboard-search .search-summary-text {
  font-family: 'Yomogi', cursive;
  color: var(--ink-lighter);
}

/* ===== Compose Form (Dashed border style) ===== */
.cardboard-compose {
  background: var(--paper) !important;
  border: 2px dashed var(--cardboard-light) !important;
  border-radius: 4px !important;
}

.cardboard-compose:hover {
  border-color: var(--cardboard) !important;
  transform: rotate(-0.2deg);
}

.cardboard-compose input,
.cardboard-compose textarea {
  color: var(--ink) !important;
}

.cardboard-compose input::placeholder,
.cardboard-compose textarea::placeholder {
  color: var(--ink-lighter) !important;
}

/* ===== Toolbar (Masking tape buttons) ===== */
.cardboard-toolbar-btn {
  font-family: 'Yomogi', cursive !important;
  background: var(--tape) !important;
  border: 1px solid var(--tape-border) !important;
  border-radius: 3px !important;
  color: var(--ink-light) !important;
  transition: all 0.15s !important;
}

.cardboard-toolbar-btn:hover {
  background: var(--cardboard-lighter) !important;
  transform: rotate(-1deg) !important;
  color: var(--ink) !important;
}

/* ===== Empty State ===== */
.cardboard-empty-state .empty-state-icon-wrapper {
  background: linear-gradient(135deg, var(--cardboard-lighter) 0%, var(--cardboard-light) 100%) !important;
}

.dark .cardboard-empty-state .empty-state-icon-wrapper {
  background: linear-gradient(135deg, var(--cardboard-darker) 0%, var(--cardboard-dark) 100%) !important;
}

.cardboard-empty-state .empty-state-tip-card {
  background: var(--paper) !important;
  border-color: var(--paper-lines) !important;
}

/* ===== Note Detail (Show page) ===== */
.cardboard-note-detail {
  background: var(--paper);
  border: 1px solid var(--paper-lines);
  border-radius: 2px;
  box-shadow: 1px 2px 6px var(--shadow);
  background-image:
    linear-gradient(var(--paper-lines) 1px, transparent 1px);
  background-size: 100% 1.6rem;
  background-position: 0 1rem;
  position: relative;
}

.cardboard-note-detail::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--marker-red);
  opacity: 0.3;
  z-index: 1;
}

.cardboard-note-detail h1 {
  font-family: 'Yomogi', cursive;
}

/* ===== AI Feature Areas ===== */
.cardboard-ai-summary {
  background: rgba(74, 127, 181, 0.1) !important;
  border-left: 3px solid var(--marker-blue) !important;
  border-radius: 0 6px 6px 0 !important;
}

.cardboard-ai-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(74, 127, 181, 0.15), rgba(90, 158, 111, 0.15));
  color: var(--marker-blue);
  border: 1px solid rgba(74, 127, 181, 0.3);
}

/* ===== Auth Pages (Cardboard box style) ===== */
.cardboard-auth {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(196, 149, 106, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(196, 149, 106, 0.08) 0%, transparent 50%);
}

.cardboard-auth-card {
  background: var(--paper) !important;
  border: 2px solid var(--cardboard-light) !important;
  border-radius: 8px !important;
  box-shadow: 2px 4px 12px var(--shadow) !important;
  padding: 2rem !important;
}

.cardboard-auth-card h2 {
  font-family: 'Yomogi', cursive !important;
  color: var(--ink) !important;
}

.cardboard-auth-card input[type="email"],
.cardboard-auth-card input[type="password"],
.cardboard-auth-card input[type="text"] {
  background: var(--paper) !important;
  border-color: var(--cardboard-light) !important;
  color: var(--ink) !important;
}

.cardboard-auth-card input:focus {
  border-color: var(--cardboard) !important;
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.2) !important;
}

.cardboard-auth-btn {
  background: linear-gradient(135deg, var(--cardboard) 0%, var(--cardboard-dark) 100%) !important;
  border: none !important;
  color: var(--paper) !important;
  font-family: 'Yomogi', cursive !important;
}

.cardboard-auth-btn:hover {
  background: linear-gradient(135deg, var(--cardboard-dark) 0%, var(--cardboard-darker) 100%) !important;
}

/* ===== Account Settings ===== */
.cardboard-settings-card {
  background: var(--paper) !important;
  border-color: var(--paper-lines) !important;
}

.cardboard-settings-card h2 {
  font-family: 'Yomogi', cursive;
}

.cardboard-stat-card {
  background: var(--cardboard-lighter) !important;
}

.dark .cardboard-stat-card {
  background: var(--cardboard-darker) !important;
}

/* ===== Section Titles ===== */
.cardboard-section-title {
  font-family: 'Yomogi', cursive;
  color: var(--ink-light);
}

/* ===== Paper Cards (generic) ===== */
.cardboard-paper-card {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
}

/* ===== Footer ===== */
.cardboard-footer {
  font-family: 'Yomogi', cursive;
  color: var(--ink-lighter);
}

@keyframes cardboard-box-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}

.loading-cardboard-box {
  animation: cardboard-box-float 2s ease-in-out infinite;
  display: inline-block;
}

/* ===== Focus ring override for cardboard theme ===== */
.cardboard-theme .focus-ring:focus-visible {
  outline-color: var(--cardboard);
}

/* ===== Buttons (Cardboard theme) ===== */
.cardboard-btn-primary {
  background: linear-gradient(135deg, var(--cardboard) 0%, var(--cardboard-dark) 100%) !important;
  color: var(--paper) !important;
}

.cardboard-btn-primary:hover {
  background: linear-gradient(135deg, var(--cardboard-dark) 0%, var(--cardboard-darker) 100%) !important;
}

/* ===== Progress bar override ===== */
.cardboard-theme .progress-bar {
  background: linear-gradient(90deg, var(--cardboard), var(--cardboard-dark));
}

/* ===== Skeleton override ===== */
.cardboard-theme .skeleton {
  background: linear-gradient(
    90deg,
    var(--cardboard-lighter) 0%,
    var(--paper) 50%,
    var(--cardboard-lighter) 100%
  );
  background-size: 200% 100%;
}

.dark .cardboard-theme .skeleton {
  background: linear-gradient(
    90deg,
    var(--cardboard-darker) 0%,
    var(--cardboard-dark) 50%,
    var(--cardboard-darker) 100%
  );
  background-size: 200% 100%;
}

/* ===== Scrollbar override ===== */
.cardboard-theme .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(196, 149, 106, 0.5);
}

.cardboard-theme .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(196, 149, 106, 0.7);
}

/* ===== Nav link underline override ===== */
.cardboard-theme .nav-link::after {
  background: var(--cardboard-lighter);
}

/* ===== Generic Form/Page Card ===== */
.cardboard-form-card {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
  border-radius: 8px !important;
  box-shadow: 1px 2px 6px var(--shadow) !important;
}

.cardboard-form-card h1,
.cardboard-form-card h2,
.cardboard-form-card h3 {
  color: var(--ink) !important;
}

.cardboard-form-card label {
  color: var(--ink-light) !important;
}

.cardboard-form-card input[type="text"],
.cardboard-form-card input[type="email"],
.cardboard-form-card input[type="password"],
.cardboard-form-card input[type="number"],
.cardboard-form-card textarea,
.cardboard-form-card select {
  background: var(--paper) !important;
  border-color: var(--cardboard-light) !important;
  color: var(--ink) !important;
}

.cardboard-form-card input:focus,
.cardboard-form-card textarea:focus,
.cardboard-form-card select:focus {
  border-color: var(--cardboard) !important;
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.2) !important;
}

/* ===== Error Box ===== */
.cardboard-error-box {
  background: rgba(196, 90, 74, 0.1) !important;
  border: 1.5px dashed var(--marker-red) !important;
  color: var(--marker-red) !important;
}

/* ===== Info/Warning Boxes ===== */
.cardboard-info-box {
  background: rgba(74, 127, 181, 0.1) !important;
  border: 1.5px dashed var(--marker-blue) !important;
  color: var(--marker-blue) !important;
}

.cardboard-warning-box {
  background: rgba(212, 168, 67, 0.1) !important;
  border: 1.5px dashed var(--marker-yellow) !important;
  color: var(--marker-yellow) !important;
}

/* ===== Breadcrumb Links ===== */
.cardboard-breadcrumb {
  color: var(--cardboard) !important;
}

.cardboard-breadcrumb:hover {
  color: var(--cardboard-dark) !important;
}

/* ===== Secondary Button ===== */
.cardboard-btn-secondary {
  background: var(--tape) !important;
  color: var(--ink-light) !important;
  border: 1px solid var(--tape-border) !important;
}

.cardboard-btn-secondary:hover {
  background: var(--cardboard-lighter) !important;
  color: var(--ink) !important;
}

/* ===== Danger Button ===== */
.cardboard-btn-danger {
  background: var(--marker-red) !important;
  color: white !important;
}

.cardboard-btn-danger:hover {
  opacity: 0.85;
}

/* ===== Category/Tag Card ===== */
.cardboard-item-card {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
  box-shadow: 1px 2px 6px var(--shadow) !important;
  transition: all 0.15s;
}

.cardboard-item-card:hover {
  box-shadow: 2px 4px 12px var(--shadow) !important;
  border-color: var(--cardboard-light) !important;
}

/* ===== Tag Pill (index page) ===== */
.cardboard-tag-pill {
  background: rgba(196, 149, 106, 0.12) !important;
  color: var(--cardboard-dark) !important;
  border: 1px solid var(--cardboard-light) !important;
  font-family: 'Yomogi', cursive !important;
}

/* ===== Template Card ===== */
.cardboard-template-card {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
  box-shadow: 1px 2px 6px var(--shadow) !important;
}

.cardboard-template-card:hover {
  box-shadow: 2px 4px 12px var(--shadow) !important;
  border-color: var(--cardboard-light) !important;
}

.cardboard-template-icon {
  background: rgba(196, 149, 106, 0.15) !important;
  color: var(--cardboard-dark) !important;
}

.dark .cardboard-template-icon {
  background: rgba(196, 149, 106, 0.1) !important;
  color: var(--cardboard-light) !important;
}

/* ===== Archived/Trashed Note Cards ===== */
.cardboard-archived-card {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
}

.cardboard-trashed-card {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
}

/* ===== AI Tag Suggestions (Cardboard style) ===== */
.cardboard-ai-tag-suggestions {
  background: rgba(74, 127, 181, 0.08) !important;
  border: 1.5px dashed var(--marker-blue) !important;
  border-radius: 6px !important;
}

.cardboard-ai-tag-btn {
  background: rgba(74, 127, 181, 0.15) !important;
  color: var(--marker-blue) !important;
  border: 1px solid rgba(74, 127, 181, 0.3) !important;
  font-family: 'Yomogi', cursive !important;
}

.cardboard-ai-tag-btn:hover {
  background: rgba(74, 127, 181, 0.25) !important;
}

/* ===== AI Related Notes ===== */
.cardboard-ai-related {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
}

.cardboard-ai-related a:hover {
  background: var(--cardboard-lighter) !important;
}

.dark .cardboard-ai-related a:hover {
  background: var(--cardboard-darker) !important;
}

/* ===== AI Summary (Cardboard style) ===== */
.cardboard-ai-summary-box {
  background: rgba(74, 127, 181, 0.08) !important;
  border-left: 3px solid var(--marker-blue) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* ===== AI Error ===== */
.cardboard-ai-error {
  background: rgba(196, 90, 74, 0.08) !important;
  border: 1.5px dashed var(--marker-red) !important;
  color: var(--marker-red) !important;
  border-radius: 6px !important;
}

/* ===== AI Loading Spinner ===== */
/* Why: AI 機能は外部 API 呼び出しで数秒待たされるため、処理中であることを視覚的に示す */
.ai-loading-spinner {
  border: 2px solid rgba(74, 127, 181, 0.2);
  border-top-color: var(--marker-blue);
  animation: ai-loading-spin 0.8s linear infinite;
}

@keyframes ai-loading-spin {
  to { transform: rotate(360deg); }
}

/* Why: Turbo Frame は busy 属性を src 読み込み中に付与するため、それを利用して
 * 空フレーム内の placeholder を表示する。完了時は自動で非表示に戻る。 */
turbo-frame[busy] .ai-loading-placeholder {
  display: block !important;
}

/* ===== Reply Form ===== */
.cardboard-reply-form {
  border-color: var(--paper-lines) !important;
}

.cardboard-reply-form input,
.cardboard-reply-form textarea {
  background: var(--paper) !important;
  border-color: var(--paper-lines) !important;
  color: var(--ink) !important;
}

.cardboard-reply-form input:focus,
.cardboard-reply-form textarea:focus {
  border-color: var(--cardboard) !important;
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.2) !important;
}

/* ===== Version History ===== */
.cardboard-version-history {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
}

.cardboard-version-history summary {
  color: var(--ink-light) !important;
}

.cardboard-version-history .version-item:hover {
  background: var(--cardboard-lighter) !important;
}

.dark .cardboard-version-history .version-item:hover {
  background: var(--cardboard-darker) !important;
}

/* ===== Import Upload Area ===== */
.cardboard-upload-area {
  border: 2px dashed var(--cardboard-light) !important;
  background: var(--paper) !important;
}

.cardboard-upload-area:hover {
  border-color: var(--cardboard) !important;
}

/* ===== Confirm Destroy Page ===== */
.cardboard-danger-card {
  background: var(--paper) !important;
  border: 2px solid var(--marker-red) !important;
  box-shadow: 2px 4px 12px var(--shadow) !important;
}

/* ===== Page Title ===== */
.cardboard-page-title {
  font-family: 'Yomogi', cursive !important;
  color: var(--ink) !important;
}

/* ===== Pagination ===== */
.cardboard-theme nav[aria-label="paginates"] a,
.cardboard-theme .pagination a {
  color: var(--cardboard) !important;
}

.cardboard-theme nav[aria-label="paginates"] a:hover,
.cardboard-theme .pagination a:hover {
  color: var(--cardboard-dark) !important;
}

/* ===== Category Grid Cards ===== */
.cardboard-category-card {
  background: var(--paper) !important;
  border: 1px solid var(--paper-lines) !important;
  box-shadow: 1px 2px 6px var(--shadow) !important;
  transition: all 0.2s ease !important;
}

.cardboard-category-card:hover {
  border-color: var(--cardboard-light) !important;
  box-shadow: 2px 4px 12px var(--shadow) !important;
  transform: translateY(-2px) rotate(-0.5deg) !important;
}

.cardboard-category-card--active {
  border-color: var(--cardboard) !important;
  background: var(--cardboard-lighter) !important;
  box-shadow: 2px 4px 12px var(--shadow) !important;
}