/* ============================================
   Rame Design System - Utility Classes
   ============================================
   Reusable utility classes for common patterns
   ============================================ */

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */
.rame-flex { display: flex; }
.rame-flex-col { flex-direction: column; }
.rame-flex-wrap { flex-wrap: wrap; }
.rame-flex-1 { flex: 1; }
.rame-flex-shrink-0 { flex-shrink: 0; }

.rame-items-center { align-items: center; }
.rame-items-start { align-items: flex-start; }
.rame-items-end { align-items: flex-end; }

.rame-justify-center { justify-content: center; }
.rame-justify-between { justify-content: space-between; }
.rame-justify-end { justify-content: flex-end; }

.rame-gap-1 { gap: var(--rame-space-1); }
.rame-gap-2 { gap: var(--rame-space-2); }
.rame-gap-3 { gap: var(--rame-space-3); }
.rame-gap-4 { gap: var(--rame-space-4); }

/* ========================================
   TEXT UTILITIES
   ======================================== */
.rame-text-primary { color: var(--rame-text-primary); }
.rame-text-secondary { color: var(--rame-text-secondary); }
.rame-text-tertiary { color: var(--rame-text-tertiary); }
.rame-text-muted { color: var(--rame-text-muted); }
.rame-text-success { color: var(--rame-success); }
.rame-text-error { color: var(--rame-error); }
.rame-text-warning { color: var(--rame-warning-text); }

.rame-text-xs { font-size: var(--rame-text-xs); }
.rame-text-sm { font-size: var(--rame-text-sm); }
.rame-text-base { font-size: var(--rame-text-base); }
.rame-text-md { font-size: var(--rame-text-md); }
.rame-text-lg { font-size: var(--rame-text-lg); }
.rame-text-xl { font-size: var(--rame-text-xl); }

.rame-font-normal { font-weight: var(--rame-font-normal); }
.rame-font-medium { font-weight: var(--rame-font-medium); }
.rame-font-semibold { font-weight: var(--rame-font-semibold); }
.rame-font-bold { font-weight: var(--rame-font-bold); }

.rame-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rame-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   BACKGROUND UTILITIES
   ======================================== */
.rame-bg-primary { background-color: var(--rame-bg-primary); }
.rame-bg-secondary { background-color: var(--rame-bg-secondary); }
.rame-bg-tertiary { background-color: var(--rame-bg-tertiary); }

/* ========================================
   BORDER UTILITIES
   ======================================== */
.rame-border { border: 1px solid var(--rame-border-light); }
.rame-border-t { border-top: 1px solid var(--rame-border-light); }
.rame-border-b { border-bottom: 1px solid var(--rame-border-light); }
.rame-border-l { border-left: 1px solid var(--rame-border-light); }
.rame-border-r { border-right: 1px solid var(--rame-border-light); }

.rame-rounded-sm { border-radius: var(--rame-radius-sm); }
.rame-rounded-md { border-radius: var(--rame-radius-md); }
.rame-rounded-lg { border-radius: var(--rame-radius-lg); }
.rame-rounded-xl { border-radius: var(--rame-radius-xl); }
.rame-rounded-full { border-radius: var(--rame-radius-full); }

/* ========================================
   SHADOW UTILITIES
   ======================================== */
.rame-shadow-sm { box-shadow: var(--rame-shadow-sm); }
.rame-shadow-md { box-shadow: var(--rame-shadow-md); }
.rame-shadow-lg { box-shadow: var(--rame-shadow-lg); }

/* ========================================
   SPACING UTILITIES
   ======================================== */
.rame-p-1 { padding: var(--rame-space-1); }
.rame-p-2 { padding: var(--rame-space-2); }
.rame-p-3 { padding: var(--rame-space-3); }
.rame-p-4 { padding: var(--rame-space-4); }

.rame-m-0 { margin: 0; }
.rame-mb-1 { margin-bottom: var(--rame-space-1); }
.rame-mb-2 { margin-bottom: var(--rame-space-2); }
.rame-mb-3 { margin-bottom: var(--rame-space-3); }
.rame-mb-4 { margin-bottom: var(--rame-space-4); }

/* ========================================
   ICON WRAPPER UTILITIES
   ======================================== */
.rame-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rame-icon-wrapper-sm {
    width: var(--rame-icon-sm);
    height: var(--rame-icon-sm);
}

.rame-icon-wrapper-md {
    width: var(--rame-icon-md);
    height: var(--rame-icon-md);
}

.rame-icon-wrapper-lg {
    width: var(--rame-icon-lg);
    height: var(--rame-icon-lg);
}

/* Circular icon container */
.rame-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rame-radius-full);
}

.rame-icon-circle-sm {
    width: var(--rame-button-sm);
    height: var(--rame-button-sm);
}

.rame-icon-circle-md {
    width: var(--rame-button-md);
    height: var(--rame-button-md);
}

.rame-icon-circle-lg {
    width: var(--rame-button-lg);
    height: var(--rame-button-lg);
}

/* ========================================
   AVATAR UTILITIES
   ======================================== */
.rame-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rame-radius-full);
    flex-shrink: 0;
    font-weight: var(--rame-font-bold);
    text-transform: uppercase;
    color: white;
}

.rame-avatar-sm {
    width: var(--rame-avatar-sm);
    height: var(--rame-avatar-sm);
    font-size: var(--rame-text-xs);
}

.rame-avatar-md {
    width: var(--rame-avatar-md);
    height: var(--rame-avatar-md);
    font-size: var(--rame-text-sm);
}

.rame-avatar-lg {
    width: var(--rame-avatar-lg);
    height: var(--rame-avatar-lg);
    font-size: var(--rame-text-md);
}

.rame-avatar-gradient {
    background: var(--rame-avatar-gradient);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

/* ========================================
   BUTTON BASE UTILITIES
   ======================================== */
.rame-btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rame-space-2);
    border: none;
    cursor: pointer;
    font-family: var(--rame-font-family);
    font-weight: var(--rame-font-semibold);
    transition: var(--rame-transition-spring);
    outline: none;
}

.rame-btn-base:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.rame-btn-base:focus-visible {
    outline: 2px solid var(--rame-primary);
    outline-offset: 2px;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
.rame-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--rame-scrollbar-thumb) var(--rame-scrollbar-track);
}

.rame-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.rame-scrollbar::-webkit-scrollbar-track {
    background: var(--rame-scrollbar-track);
}

.rame-scrollbar::-webkit-scrollbar-thumb {
    background: var(--rame-scrollbar-thumb);
    border-radius: 3px;
}

.rame-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--rame-scrollbar-thumb-hover);
}

/* ========================================
   VISIBILITY UTILITIES
   ======================================== */
.rame-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 768px) {
    .rame-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .rame-hide-desktop { display: none !important; }
}

/* ========================================
   KANBAN TAG EDITOR OVERFLOW
   Global rule needed because the dropdown
   crosses component boundaries (card → column)
   ======================================== */
.column-content:has(.editing-tags) {
    overflow: visible;
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .rame-transition-none,
    .rame-animate-none {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================
   RESPONSIVE HELPERS (mobile + tablet)
   - .rame-mobile-only       : visible only on phones (≤640px)
   - .rame-tablet-and-down   : visible on phones + tablets (≤1024px)
   - .rame-desktop-only      : hidden on phones + tablets (≤1024px)
   - .rame-mobile-back-btn   : reusable back-arrow button styling
   - .rame-mobile-readonly-banner : informational "desktop-only" banner
   ======================================== */

/* Default desktop visibility: helpers paint nothing on desktop because they
   are only added to elements meant to appear on small viewports. */
.rame-mobile-only,
.rame-tablet-and-down {
    display: none;
}

@media (max-width: 1024px) {
    .rame-tablet-and-down { display: initial; }
    .rame-desktop-only { display: none !important; }

    .rame-mobile-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        background: transparent;
        border: none;
        border-radius: var(--rame-radius-full, 50%);
        color: var(--rame-text-primary, #1c1e21);
        cursor: pointer;
        padding: 0;
        margin-right: var(--rame-space-2, 8px);
        flex-shrink: 0;
    }

    .rame-mobile-back-btn:hover {
        background: var(--rame-bg-hover, #e4e6eb);
    }

    .rame-mobile-readonly-banner {
        display: flex;
        align-items: center;
        gap: var(--rame-space-2, 8px);
        padding: var(--rame-space-3, 12px) var(--rame-space-4, 16px);
        background: var(--rame-warning-light, #fff3e0);
        color: var(--rame-warning-text, #e65100);
        border-bottom: 1px solid var(--rame-warning-border, #ffe082);
        font-size: 14px;
        line-height: 1.4;
    }
}

@media (max-width: 640px) {
    .rame-mobile-only { display: initial; }
}

/* Dark-mode tweak for the read-only banner — applies at all viewport sizes
   but only matters when the banner is rendered (mobile/tablet only). */
:global([data-rame-theme="dark"]) .rame-mobile-readonly-banner {
    background: var(--rame-warning-light, #3d3020);
    color: var(--rame-warning-text, #ffc978);
    border-bottom-color: #5a4530;
}