/**
 * Atlasia Content Builder — Styles
 */

/* Editor Mode Styles */
.cb-editor-mode { cursor: default !important; user-select: none !important }
.cb-editor-mode * { outline: 2px dashed transparent !important; transition: outline 0.15s ease }
.cb-editor-mode [data-cb-block] { cursor: pointer }
.cb-editor-mode [data-cb-block]:hover { outline: 2px dashed var(--primary, #325E87) !important; outline-offset: 4px; background: rgba(50, 94, 135, 0.04) }
.cb-editor-mode [data-cb-block]:hover::before { content: '⬆ Drop here'; position: absolute; top: -24px; left: 0; background: var(--primary); color: #fff; font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; white-space: nowrap; z-index: 99999 }
.cb-editor-mode [data-cb-block]::after { content: ''; position: absolute; inset: -4px; border: 2px solid transparent; pointer-events: none }
.cb-editor-mode [data-cb-block]:hover::after { border-color: var(--primary); border-radius: 4px }
.cb-block-selected { outline: 3px solid var(--accent, #0F766E) !important; outline-offset: 4px; box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.2) }
.cb-drag-over { outline: 3px dashed var(--primary) !important; outline-offset: 4px; background: rgba(50, 94, 135, 0.08) !important }
.cb-block-toolbar { z-index: 99998; animation: cbSlideIn 0.15s ease }
@keyframes cbSlideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Library modal */
#cb-block-library-modal { animation: cbFadeIn 0.2s ease }
@keyframes cbFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Editor toolbar */
#cb-editor-toolbar { animation: cbSlideDown 0.2s ease }
@keyframes cbSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Preview mode */
.cb-editor-preview .cb-block-toolbar,
.cb-editor-preview #cb-editor-toolbar { display: none !important }
.cb-editor-preview [data-cb-block] { cursor: default !important; outline: none !important }

/* Style editor */
.cb-color-input { font-family: 'Courier New', monospace; font-size: 0.8rem }
.cb-style-preview-btn { transition: all 0.2s ease }
.cb-style-preview-btn:hover { transform: translateY(-1px); }

/* Block animations */
.anim-fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease }
.anim-fade-in.visible { opacity: 1; transform: translateY(0); }
.anim-slide-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease }
.anim-slide-left.visible { opacity: 1; transform: translateX(0); }
.anim-slide-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s ease }
.anim-slide-right.visible { opacity: 1; transform: translateX(0); }
.anim-scale-in { opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease }
.anim-scale-in.visible { opacity: 1; transform: scale(1); }

/* Grid stagger */
.grid-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease }
.grid-stagger.visible > * { opacity: 1; transform: translateY(0); }
.grid-stagger.visible > *:nth-child(1) { transition-delay: 0.05s }
.grid-stagger.visible > *:nth-child(2) { transition-delay: 0.1s }
.grid-stagger.visible > *:nth-child(3) { transition-delay: 0.15s }
.grid-stagger.visible > *:nth-child(4) { transition-delay: 0.2s }
.grid-stagger.visible > *:nth-child(5) { transition-delay: 0.25s }
.grid-stagger.visible > *:nth-child(6) { transition-delay: 0.3s }

/* Skeleton loading */
.cb-skeleton { background: linear-gradient(90deg, var(--primary-100) 25%, var(--primary-50) 50%, var(--primary-100) 75%); background-size: 200% 100%; animation: cbShimmer 1.8s ease-in-out infinite; border-radius: var(--radius-sm); }
.cb-skeleton-text { height: 16px; margin-bottom: 8px; border-radius: 4px; }
.cb-skeleton-title { height: 32px; width: 70%; margin-bottom: 12px; border-radius: 8px; }
.cb-skeleton-card { height: 400px; border-radius: var(--radius); }
@keyframes cbShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Amazigh decorative elements */
.cb-amazigh-symbol { font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans', sans-serif; line-height: 1; pointer-events: none }
.cb-amazigh-bg::before, .cb-amazigh-bg::after { content: ""; pointer-events: none; z-index: 0 }
.cb-amazigh-pattern { position: relative; overflow: hidden }
.cb-amazigh-pattern::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 20px, var(--primary) 20px, var(--primary) 21px, transparent 21px); opacity: 0.04; z-index: 0 }
.cb-amazigh-pattern > * { position: relative; z-index: 1 }

/* Divider styles */
.cb-divider { width: 100%; border: none }
.cb-divider.geometric { background: repeating-linear-gradient(90deg, var(--primary) 0px, var(--primary) 20px, var(--primary-200) 20px, var(--primary-200) 40px) }
.cb-divider.amazigh::before { content: "ⵣ"; font-family: 'Segoe UI Symbol'; font-size: 1rem; color: var(--primary); opacity: 0.3 }
.cb-divider.wave { background: linear-gradient(90deg, var(--primary), var(--primary-200), var(--sand), var(--primary-200), var(--primary)); background-size: 200% 100%; animation: cbWave 4s ease-in-out infinite }
@keyframes cbWave { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Responsive */
@media (max-width: 768px) {
    .cb-block-toolbar { display: none !important }
    .cb-editor-mode .cb-drag-over { outline: 1px dashed var(--primary) !important }
}
@media (min-width: 481px) and (max-width: 768px) {
    #cb-editor-toolbar { flex-wrap: wrap; }
    #cb-editor-toolbar .cb-btn { flex: 1 1 auto; min-width: 44px; min-height: 44px; }
}
@media (max-width: 480px) {
    #cb-editor-toolbar { flex-wrap: wrap; gap: 4px; }
    #cb-editor-toolbar .cb-btn { flex: 1 1 calc(50% - 4px); min-width: 44px; min-height: 44px; padding: 6px; font-size: 0.8rem; }
    .cb-block-list { gap: 4px !important; }
    .cb-block-item { padding: 6px !important; }
    .cb-editor-preview [data-cb-block]:hover::before { display: none; }
}
@media (hover: none) and (pointer: coarse) {
    .cb-editor-mode [data-cb-block]:hover { outline-offset: 2px; }
    .cb-block-toolbar { display: none !important }
    .cb-block-item { min-height: 44px }
}
/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .cb-editor-toolbar { flex-wrap: wrap; }
    #cb-block-library-modal { max-height: 50vh; overflow-y: auto; }
    .cb-style-panel { max-height: 50vh; overflow-y: auto; }
}
/* Ultra mobile */
@media (max-width: 360px) {
    .cb-block[data-type="cards"] .cb-cards-grid { grid-template-columns: 1fr !important; }
    .cb-block[data-type="stats"] .cb-stats-grid { grid-template-columns: 1fr !important; }
}
/* Container queries for editor */
@media (max-width: 600px) {
    .cb-editor-preview [data-cb-block]:hover::after { display: none; }
}
/* Print styles for content builder */
@media print {
    .cb-editor-mode { cursor: default !important; user-select: auto !important; outline: none !important }
    .cb-editor-mode [data-cb-block] { outline: none !important; cursor: default !important }
    .cb-editor-mode [data-cb-block]:hover { outline: none !important; background: transparent !important }
    .cb-block-toolbar { display: none !important }
    #cb-editor-toolbar { display: none !important }
    #cb-block-library-modal { display: none !important }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .anim-fade-in, .anim-slide-left, .anim-slide-right, .anim-scale-in, .grid-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important }
    .cb-skeleton { animation: none !important }
    .cb-divider.wave { animation: none !important }
    .cb-skeleton { animation: none !important }
}