/* ============================================================================
   HILLCREST CRM - STYLES
   ============================================================================ */

/* ============================================================================
   CSS VARIABLES - BRAND COLORS
   ============================================================================ */

:root {
    /* Primary Brand Colors (Green Theme) */
    --color-primary: #45856A;
    --color-primary-dark: #2d5a47;
    --color-primary-light: #5a9d7f;
    
    /* Text Colors */
    --color-text-primary: #1e3a8a;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    
    /* Background Colors */
    --color-bg-primary: #eff6ff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    
    /* Status Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    
    /* Document Expiry Colors */
    --color-expired: #dc2626;
    --color-critical: #f87171;
    --color-safe: #10b981;
    
    /* Border Colors */
    --color-border-light: #e2e8f0;
    --color-border-medium: #cbd5e1;
    --color-border-dark: #94a3b8;
}

/* Base - Professional compact sizing */
html {
    font-size: 14px;
}

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #f8fafc;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* App Container */
#app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Main Content Area */
#main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding-bottom: 2rem;
}

/* ============================================================================
   SCROLLBARS
   ============================================================================ */

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

.tabular-nums {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ============================================================================
   AVATARS
   ============================================================================ */

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
    border: 2px solid white;
}

/* Sidebar avatar - blue gradient */
#user-profile .avatar,
#mobile-user-profile .avatar {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
}

/* ============================================================================
   MODALS
   ============================================================================ */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================================================
   KANBAN BOARD
   ============================================================================ */

#kanban-board {
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    padding-bottom: 1rem;
}

.kanban-column {
    min-width: 300px;
    max-width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.deal-list {
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

/* Interactive Elements */
.deal-row, .task-row {
    transition: background-color 0.15s ease;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

/* Notification Badge Pulse */
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

#notification-badge {
    animation: pulse-ring 2s ease-in-out infinite;
}

/* Slide Down Animation */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#notification-panel:not(.hidden),
#command-palette > div {
    animation: slideDown 0.2s ease-out;
}

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#command-palette:not(.hidden) {
    animation: fadeIn 0.15s ease-out;
}

/* Spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Shimmer Loading */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    /* Larger touch targets */
    button, a, .nav-link {
        min-height: 44px;
    }
    
    /* Prevent zoom on input focus (iOS) */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Kanban columns stack vertically */
    #kanban-board {
        flex-direction: column !important;
        gap: 1rem;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    .kanban-column {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: 400px;
        flex-shrink: 0;
    }
    
    /* Modal full screen on mobile */
    .modal-backdrop > div {
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        height: 100vh;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Deal detail modal - stack vertically */
    #deal-detail-content {
        flex-direction: column !important;
    }
    
    #deal-detail-content > div:first-child {
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    #deal-detail-content > div:last-child {
        flex: 1 !important;
        overflow-y: auto !important;
    }
    
    /* Contact detail modal - stack vertically */
    #contact-detail-content {
        flex-direction: column !important;
    }
    
    #contact-detail-content > div:first-child {
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    #contact-detail-content > div:last-child {
        flex: 1 !important;
        overflow-y: auto !important;
    }
    
    /* Main content padding */
    #main-content {
        padding: 0.75rem !important;
    }
    
    /* Tables horizontal scroll */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
    }
    
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Dashboard grid - single column on mobile */
    #main-content > .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* Smaller padding for cards */
    #main-content .rounded-xl,
    #main-content .rounded-lg {
        padding: 0.75rem !important;
    }
    
    /* Header - more compact */
    header {
        padding: 0.5rem 0.75rem !important;
    }
    
    header h1 {
        font-size: 1rem !important;
    }
    
    /* Form inputs - full width */
    #deal-detail-form input,
    #deal-detail-form select,
    #deal-detail-form textarea,
    #contact-info-form input,
    #contact-info-form select,
    #contact-info-form textarea {
        width: 100% !important;
    }
    
    /* Activity tab - stack form fields */
    .bg-blue-50\/50 .flex.gap-4 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .bg-blue-50\/50 .flex.gap-4 > div {
        width: 100% !important;
    }
    
    /* Linked contacts grid - single column */
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* User cards grid - single column */
    .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Contact cards grid - 2 columns max */
    .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Reports cards - 2 columns */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Tabs - horizontal scroll */
    .deal-tab-btn {
        white-space: nowrap;
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Tab container - scroll horizontally */
    ul.flex.flex-wrap {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem !important;
    }
    
    /* Funding table - smaller text */
    #funding-table td,
    #funding-table th {
        padding: 0.25rem !important;
        font-size: 0.65rem !important;
    }
    
    /* Draws section - stack buttons */
    .draws-header-btns {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* Modal close button - larger */
    .modal-backdrop button[class*="text-2xl"] {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Notification panel - full width */
    #notification-panel {
        right: 0.5rem !important;
        left: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* Command palette - full width */
    #command-palette > div {
        margin: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }
    
    /* Status tab text areas */
    #status-tab textarea {
        min-height: 80px !important;
    }
    
    /* Draw summary stats - 2 columns */
    .flex.justify-around {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .flex.justify-around > div {
        width: 45% !important;
        text-align: center !important;
    }
    
    /* Progress/Funding tables - horizontal scroll */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Compliance checklist - more compact */
    .compliance-item {
        padding: 0.5rem !important;
    }
}

/* Extra small screens (phones in portrait) */
@media (max-width: 375px) {
    /* Even smaller text */
    html {
        font-size: 13px;
    }
    
    /* Single column for contact cards */
    .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Smaller buttons */
    .w-8.h-8 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    
    /* Even more compact header */
    header {
        padding: 0.25rem 0.5rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .kanban-column {
        min-width: 280px;
    }
}

/* Large screens */
@media (min-width: 1280px) {
    .contact-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================================
   MOBILE FAB (Floating Action Button)
   ============================================================================ */

#mobile-fab {
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#mobile-fab:active {
    transform: scale(0.95);
}

/* ============================================================================
   COMMAND PALETTE
   ============================================================================ */

#command-palette {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

#command-palette-input {
    caret-color: #3b82f6;
}

#command-palette-results .cmd-result:hover {
    background: #eff6ff;
}

kbd {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ============================================================================
   NOTIFICATION PANEL
   ============================================================================ */

#notification-panel {
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.notification-item {
    transition: background-color 0.15s ease;
}

.notification-item:hover {
    background-color: #f0f9ff;
}

/* ============================================================================
   SIDEBAR TRANSITIONS
   ============================================================================ */

#desktop-sidebar {
    transition: width 0.3s ease;
}

#mobile-sidebar {
    transition: transform 0.3s ease;
}

/* ============================================================================
   SAFE AREA (for notched devices like iPhone X+)
   ============================================================================ */

@supports (padding: max(0px)) {
    header {
        padding-top: max(0px, env(safe-area-inset-top));
    }
    
    #mobile-sidebar {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    
    #mobile-fab {
        bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
        right: max(1.5rem, calc(env(safe-area-inset-right) + 1rem));
    }
}

/* ============================================================================
   CSS VARIABLES (Dark Mode Ready)
   ============================================================================ */

:root {
    /* Base colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --accent-color: #3b82f6;
    --sidebar-bg: #072a5e;
    
    /* Brand colors */
    --brand-primary: #0d47a1;
    --brand-primary-dark: #072a5e;
    --brand-primary-light: #1565c0;
    --brand-text-primary: #1e3a8a;
    --brand-text-secondary: #475569;
    
    /* Button colors */
    --btn-primary: #2563eb;
    --btn-primary-hover: #1d4ed8;
    --btn-success: #16a34a;
    --btn-success-hover: #15803d;
    --btn-danger: #dc2626;
    --btn-danger-hover: #b91c1c;
    --btn-warning: #d97706;
    --btn-warning-hover: #b45309;
    
    /* Status colors */
    --status-success: #22c55e;
    --status-warning: #eab308;
    --status-danger: #ef4444;
    --status-info: #3b82f6;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    #mobile-sidebar,
    #desktop-sidebar,
    header,
    #mobile-fab,
    #notification-panel,
    #command-palette {
        display: none !important;
    }
    
    #main-content {
        padding: 0 !important;
    }
    
    .modal-backdrop {
        position: static !important;
        background: none !important;
    }
    
    .modal-backdrop > div {
        box-shadow: none !important;
        margin: 0 !important;
        max-height: none !important;
        height: auto !important;
    }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

/* Truncate text - 2 lines */
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth scroll */
.smooth-scroll {
    scroll-behavior: smooth;
}

/* Focus visible */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Disabled state */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Glass effect */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Card hover effect */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile-specific helper */
@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* Custom checkbox styling - white background with black tick */
.pref-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: white;
    border: 1px solid #9ca3af;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease-in-out;
}

.pref-checkbox:checked {
    background-color: white;
    border-color: #374151;
}

.pref-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #1f2937;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pref-checkbox:disabled {
    cursor: default;
    opacity: 0.9;
}

.pref-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}