/**

 * NeuraRealty Components CSS

 * Buttons, forms, cards, badges, modals

 * NeuraWeb Global Inc.

 */



/* ============================================

   BUTTONS

   ============================================ */

.nr-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 20px;

    font-family: var(--font-body);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    border-radius: var(--nr-radius-sm);

    border: 1px solid transparent;

    cursor: pointer;

    transition: all var(--nr-transition-base);

    text-decoration: none;

    white-space: nowrap;

}



.nr-btn:disabled,

.nr-btn.disabled {

    opacity: 0.5;

    cursor: not-allowed;

    pointer-events: none;

}



/* Primary Button */

.nr-btn-primary {

    background: var(--nr-primary);

    color: var(--nr-text-inverse);

    border-color: var(--nr-primary);

}



.nr-btn-primary:hover {

    background: var(--nr-primary-dark);

    border-color: var(--nr-primary-dark);

}



.nr-btn-primary .gf-icon {

    filter: brightness(0) saturate(100%) invert(1);

}



/* Secondary Button */

.nr-btn-secondary {

    background: var(--nr-bg-card);

    color: var(--nr-text-primary);

    border-color: var(--nr-border);

}



.nr-btn-secondary:hover {

    background: var(--nr-bg-secondary);

    border-color: var(--nr-border);

}



/* Ghost Button */

.nr-btn-ghost {

    background: transparent;

    color: var(--nr-text-secondary);

    border-color: transparent;

}



.nr-btn-ghost:hover {

    background: var(--nr-bg-secondary);

    color: var(--nr-text-primary);

}



.nr-btn-ghost.active {

    background: var(--nr-bg-secondary);

    color: var(--nr-primary);

}



/* Danger Button */

.nr-btn-danger {

    background: var(--nr-danger);

    color: var(--nr-text-inverse);

    border-color: var(--nr-danger);

}



.nr-btn-danger:hover {

    background: #DC2626;

    border-color: #DC2626;

}



/* Button Sizes */

.nr-btn-xs {

    padding: 4px 10px;

    font-size: 12px;

}



.nr-btn-sm {

    padding: 6px 14px;

    font-size: 13px;

}



.nr-btn-lg {

    padding: 14px 28px;

    font-size: 16px;

}



.nr-btn-block {

    width: 100%;

}



/* Icon-only Button */

.nr-btn-icon {

    padding: 8px;

    gap: 0;

}



.nr-btn-icon .gf-icon {

    margin: 0;

}



/* ============================================

   FORM ELEMENTS

   ============================================ */



/* Labels */

.nr-label {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    font-weight: 600;

    color: var(--nr-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 6px;

}



.nr-label .gf-icon {

    opacity: 0.6;

}



/* Inputs & Selects */

.nr-input,

.nr-select,

.nr-textarea {

    width: 100%;

    padding: 10px 14px;

    font-family: var(--font-body);

    font-size: 14px;

    line-height: 1.4;

    color: var(--nr-text-primary);

    background: var(--nr-bg-card);

    border: 1px solid var(--nr-border);

    border-radius: var(--nr-radius-sm);

    transition: all var(--nr-transition-fast);

}



.nr-input:hover,

.nr-select:hover,

.nr-textarea:hover {

    border-color: var(--nr-text-muted);

}



.nr-input:focus,

.nr-select:focus,

.nr-textarea:focus {

    outline: none;

    border-color: var(--nr-primary);

    box-shadow: 0 0 0 3px rgba(27, 77, 62, 0.1);

}



.nr-input::placeholder {

    color: var(--nr-text-muted);

}



.nr-input:disabled,

.nr-select:disabled {

    background: var(--nr-bg-secondary);

    color: var(--nr-text-muted);

    cursor: not-allowed;

}



/* Select specific */

.nr-select {

    cursor: pointer;

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 12px center;

    padding-right: 36px;

}



/* Smaller inputs */

.nr-input-sm,

.nr-select-sm {

    padding: 6px 10px;

    font-size: 13px;

}



.nr-select-sm {

    padding-right: 30px;

    background-position: right 8px center;

}



/* Checkbox & Radio */

.nr-checkbox,

.nr-radio {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    font-size: 14px;

    color: var(--nr-text-secondary);

}



.nr-checkbox input,

.nr-radio input {

    width: 18px;

    height: 18px;

    margin: 0;

    cursor: pointer;

    accent-color: var(--nr-primary);

}



/* Input with icon */

.nr-input-group {

    position: relative;

}



.nr-input-group .gf-icon {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    pointer-events: none;

    opacity: 0.5;

}



.nr-input-group .nr-input {

    padding-left: 40px;

}



/* Range inputs (min-max pairs) */

.nr-range-group {

    display: flex;

    align-items: center;

    gap: 8px;

}



.nr-range-group .nr-input {

    flex: 1;

    min-width: 0;

}



.nr-range-separator {

    color: var(--nr-text-muted);

    font-size: 14px;

}



/* Form Field wrapper */

.nr-field {

    margin-bottom: var(--nr-space-md);

}



.nr-field:last-child {

    margin-bottom: 0;

}



/* ============================================

   CARDS

   ============================================ */

.nr-card {

    background: var(--nr-bg-card);

    border: 1px solid var(--nr-border);

    border-radius: var(--nr-radius-lg);

    overflow: hidden;

    transition: all var(--nr-transition-base);

}



.nr-card-hover:hover {

    box-shadow: var(--nr-shadow-lg);

    transform: translateY(-2px);

}



.nr-card-header {

    padding: 16px 20px;

    border-bottom: 1px solid var(--nr-border);

    background: var(--nr-bg-secondary);

}



.nr-card-header h3,

.nr-card-header h4 {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    font-size: 14px;

}



.nr-card-body {

    padding: 20px;

}



.nr-card-footer {

    padding: 16px 20px;

    border-top: 1px solid var(--nr-border);

    background: var(--nr-bg-secondary);

}



/* ============================================

   BADGES

   ============================================ */

.nr-badge {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 10px;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    border-radius: var(--nr-radius-xs);

    white-space: nowrap;

}



.nr-badge-default {

    background: var(--nr-bg-tertiary);

    color: var(--nr-text-secondary);

}



.nr-badge-primary {

    background: rgba(27, 77, 62, 0.15);

    color: var(--nr-primary);

}



.nr-badge-success {

    background: rgba(34, 197, 94, 0.15);

    color: #16A34A;

}



.nr-badge-warning {

    background: rgba(245, 158, 11, 0.15);

    color: #D97706;

}



.nr-badge-danger {

    background: rgba(239, 68, 68, 0.15);

    color: #DC2626;

}



.nr-badge-info {

    background: rgba(59, 130, 246, 0.15);

    color: #2563EB;

}



/* Solid badges for overlays */

.nr-badge-solid {

    color: var(--nr-text-inverse);

}



.nr-badge-solid.nr-badge-success { background: var(--nr-success); }

.nr-badge-solid.nr-badge-warning { background: var(--nr-warning); }

.nr-badge-solid.nr-badge-danger { background: var(--nr-danger); }

.nr-badge-solid.nr-badge-info { background: var(--nr-info); }

.nr-badge-solid.nr-badge-dark { background: rgba(0,0,0,0.7); }



/* ============================================

   MODAL

   ============================================ */

.nr-modal {

    position: fixed;

    inset: 0;

    z-index: var(--nr-z-modal);

    display: none;

    align-items: center;

    justify-content: center;

    padding: var(--nr-space-lg);

}



.nr-modal.active {

    display: flex;

}



.nr-modal-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

}



.nr-modal-content {

    position: relative;

    background: var(--nr-bg-card);

    border-radius: var(--nr-radius-lg);

    box-shadow: var(--nr-shadow-xl);

    max-width: 600px;

    width: 100%;

    max-height: 90vh;

    overflow: auto;

}



.nr-modal-lg { max-width: 900px; }

.nr-modal-xl { max-width: 1200px; }

.nr-modal-full { max-width: calc(100vw - 48px); }



.nr-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    border-bottom: 1px solid var(--nr-border);

}



.nr-modal-header h2,

.nr-modal-header h3 {

    margin: 0;

    font-size: 18px;

}



.nr-modal-close {

    padding: 8px;

    background: transparent;

    border: none;

    border-radius: var(--nr-radius-sm);

    cursor: pointer;

    color: var(--nr-text-muted);

    transition: all var(--nr-transition-fast);

}



.nr-modal-close:hover {

    background: var(--nr-bg-secondary);

    color: var(--nr-text-primary);

}



.nr-modal-body {

    padding: 20px;

}



.nr-modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    padding: 16px 20px;

    border-top: 1px solid var(--nr-border);

}



/* ============================================

   DROPDOWN

   ============================================ */

.nr-dropdown {

    position: relative;

}



.nr-dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    z-index: var(--nr-z-dropdown);

    min-width: 200px;

    padding: 8px;

    background: var(--nr-bg-card);

    border: 1px solid var(--nr-border);

    border-radius: var(--nr-radius-md);

    box-shadow: var(--nr-shadow-lg);

    display: none;

}



.nr-dropdown.active .nr-dropdown-menu,

.nr-dropdown:focus-within .nr-dropdown-menu {

    display: block;

}



.nr-dropdown-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    font-size: 14px;

    color: var(--nr-text-primary);

    text-decoration: none;

    border-radius: var(--nr-radius-sm);

    transition: background var(--nr-transition-fast);

}



.nr-dropdown-item:hover {

    background: var(--nr-bg-secondary);

}



.nr-dropdown-divider {

    height: 1px;

    margin: 8px 0;

    background: var(--nr-border);

}



/* ============================================

   TABS

   ============================================ */

.nr-tabs {

    display: flex;

    gap: 4px;

    padding: 4px;

    background: var(--nr-bg-secondary);

    border-radius: var(--nr-radius-md);

}



.nr-tab {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 10px 16px;

    font-size: 14px;

    font-weight: 500;

    color: var(--nr-text-secondary);

    background: transparent;

    border: none;

    border-radius: var(--nr-radius-sm);

    cursor: pointer;

    transition: all var(--nr-transition-fast);

}



.nr-tab:hover {

    color: var(--nr-text-primary);

}



.nr-tab.active {

    background: var(--nr-bg-card);

    color: var(--nr-primary);

    box-shadow: var(--nr-shadow-sm);

}



.nr-tab.active .gf-icon {

    filter: brightness(0) saturate(100%) invert(23%) sepia(15%) saturate(1500%) hue-rotate(115deg) brightness(95%) contrast(90%);

}



/* ============================================

   PAGINATION

   ============================================ */

.nr-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    flex-wrap: wrap;

}



.nr-page-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    min-width: 36px;

    padding: 8px 12px;

    font-size: 13px;

    font-weight: 500;

    color: var(--nr-text-secondary);

    background: var(--nr-bg-card);

    border: 1px solid var(--nr-border);

    border-radius: var(--nr-radius-sm);

    text-decoration: none;

    cursor: pointer;

    transition: all var(--nr-transition-fast);

}



.nr-page-btn:hover {

    background: var(--nr-bg-secondary);

    color: var(--nr-text-primary);

}



.nr-page-btn.active {

    background: var(--nr-primary);

    color: var(--nr-text-inverse);

    border-color: var(--nr-primary);

}



.nr-page-dots {

    padding: 8px;

    color: var(--nr-text-muted);

}



.nr-page-info {

    font-size: 13px;

    color: var(--nr-text-muted);

    margin: 0 8px;

}



/* ============================================

   EMPTY STATE

   ============================================ */

.nr-empty {

    text-align: center;

    padding: 60px 20px;

    color: var(--nr-text-muted);

}



.nr-empty .gf-icon {

    opacity: 0.3;

    margin-bottom: 16px;

}



.nr-empty h3 {

    color: var(--nr-text-primary);

    margin-bottom: 8px;

}



.nr-empty p {

    margin-bottom: 20px;

}



/* ============================================

   LOADING STATES

   ============================================ */

.nr-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 40px;

    color: var(--nr-text-muted);

}



.nr-spinner {

    width: 24px;

    height: 24px;

    border: 3px solid var(--nr-border);

    border-top-color: var(--nr-primary);

    border-radius: 50%;

    animation: nr-spin 0.8s linear infinite;

}



@keyframes nr-spin {

    to { transform: rotate(360deg); }

}



/* Skeleton loading */

.nr-skeleton {

    background: linear-gradient(90deg, var(--nr-bg-secondary) 25%, var(--nr-bg-tertiary) 50%, var(--nr-bg-secondary) 75%);

    background-size: 200% 100%;

    animation: nr-shimmer 1.5s ease-in-out infinite;

    border-radius: var(--nr-radius-sm);

}



@keyframes nr-shimmer {

    0% { background-position: 200% 0; }

    100% { background-position: -200% 0; }

}



/* ============================================

   TOOLTIP

   ============================================ */

[data-tooltip] {

    position: relative;

}



[data-tooltip]::after {

    content: attr(data-tooltip);

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%);

    padding: 6px 10px;

    font-size: 12px;

    font-weight: 500;

    color: var(--nr-text-inverse);

    background: var(--nr-text-primary);

    border-radius: var(--nr-radius-xs);

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    transition: all var(--nr-transition-fast);

    pointer-events: none;

    z-index: var(--nr-z-tooltip);

}



[data-tooltip]:hover::after {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(-4px);

}