/* ═══════════════════════════════════════════════════════════════════════
   Estimation Community v12 — community-style.css
   Styles only for the community layer; v11 styles come from style.css
═══════════════════════════════════════════════════════════════════════ */

/* ── Community wrapper ── */
#c12-community-wrapper { font-family: 'Segoe UI', system-ui, sans-serif; }
#c12-community-wrapper *, #c12-community-wrapper *::before, #c12-community-wrapper *::after { box-sizing: border-box; }

/* ── Auth wall ── */
.c12-auth-wall {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
    border-radius: 16px; padding: 40px 16px; margin-top: 8px;
}
.c12-auth-card {
    background: rgba(255,255,255,0.08); backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 24px;
    padding: 44px 40px; max-width: 420px; width: 100%; text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.c12-auth-logo  { font-size: 52px; margin-bottom: 12px; }
.c12-auth-title { font-size: 1.6em; font-weight: 800; color: #fff; margin: 0 0 10px; }
.c12-auth-sub   { font-size: 14px; color: rgba(255,255,255,0.72); margin-bottom: 28px; line-height: 1.6; }
.c12-auth-note  { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 16px; }
.c12-google-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: #fff; color: #1a1a2e; border: none; border-radius: 50px;
    padding: 14px 32px; font-size: 15px; font-weight: 700; cursor: pointer; width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform .15s, box-shadow .15s;
}
.c12-google-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }

/* ── Nav bar ── */
.c12-nav {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    background: #1a1a2e; padding: 10px 18px; border-radius: 12px 12px 0 0;
    position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.c12-nav-left  { display: flex; align-items: center; gap: 8px; }
.c12-nav-logo  { font-size: 22px; }
.c12-nav-brand { font-size: 1.05em; font-weight: 800; color: #f5c842; letter-spacing: -.2px; }
.c12-nav-center { display: flex; gap: 4px; }
.c12-nav-btn {
    background: transparent; border: none; color: rgba(255,255,255,0.65);
    padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.c12-nav-btn:hover, .c12-nav-btn.active { background: rgba(245,200,66,0.18); color: #f5c842; }
.c12-nav-right  { display: flex; align-items: center; gap: 10px; }
.c12-avatar-wrap { display: flex; align-items: center; gap: 7px; }
.c12-avatar-sm  { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #f5c842; object-fit: cover; }
.c12-nav-username { font-size: 13px; font-weight: 600; color: #fff; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Buttons ── */
.c12-btn {
    display: inline-flex; align-items: center; gap: 5px; border: none; border-radius: 8px;
    padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: filter .15s, transform .12s; text-decoration: none;
}
.c12-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.c12-btn:active { transform: translateY(0); }
.c12-btn-primary  { background: linear-gradient(135deg,#f5c842,#f09819); color: #1a1a2e; }
.c12-btn-secondary{ background: rgba(26,26,46,0.08); color: #1a1a2e; border: 1px solid rgba(26,26,46,0.18); }
.c12-btn-success  { background: linear-gradient(135deg,#27ae60,#1e8449); color: #fff; }
.c12-btn-danger   { background: linear-gradient(135deg,#e74c3c,#c0392b); color: #fff; }
.c12-btn-cancel   { background: rgba(231,76,60,0.09); color: #c0392b; border: 1px solid rgba(231,76,60,0.28); }
.c12-btn-sm       { padding: 5px 11px; font-size: 12px; }
.c12-btn-group    { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ── Tab panels ── */
.c12-tab-panel { padding: 16px; background: #f4f6fc; min-height: 50vh; }
.c12-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.c12-section-header h2 { font-size: 1.1em; font-weight: 800; color: #1a1a2e; margin: 0; }
.c12-badge { background: #1a1a2e; color: #f5c842; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }

/* ── Filters bar ── */
.c12-filters-bar {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 10px 16px; background: #fff;
    border-bottom: 1px solid #e0e4f0;
    position: sticky; top: 56px; z-index: 100;
}
.c12-filter-input, .c12-filter-select {
    padding: 7px 11px; border: 1px solid #d4d8ee; border-radius: 8px;
    font-size: 13px; color: #1a1a2e; background: #fff; outline: none;
    transition: border-color .2s; flex: 1 1 150px;
}
.c12-filter-input:focus, .c12-filter-select:focus { border-color: #667eea; }

/* ── Feed grid + cards ── */
.c12-feed-grid {
    display: grid; grid-template-columns: repeat(auto-fill,minmax(290px,1fr)); gap: 14px; padding: 14px 0;
}
.c12-card {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(26,26,46,0.07); border: 1px solid #e8eaf6;
    display: flex; flex-direction: column; cursor: pointer;
    transition: box-shadow .2s, transform .2s;
}
.c12-card:hover { box-shadow: 0 8px 26px rgba(26,26,46,0.14); transform: translateY(-2px); }
.c12-card-thumb {
    width: 100%; height: 140px; object-fit: cover; flex-shrink: 0;
    background: linear-gradient(135deg,#1a1a2e,#533483);
    display: flex; align-items: center; justify-content: center; font-size: 44px; color: rgba(255,255,255,0.35);
}
.c12-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c12-card-body  { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.c12-card-title { font-size: .93em; font-weight: 800; color: #1a1a2e; line-height: 1.3; }
.c12-card-meta  { font-size: 12px; color: #888; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c12-card-author{ font-weight: 700; color: #667eea; cursor: pointer; }
.c12-card-author:hover { text-decoration: underline; }
.c12-card-desc  { font-size: 12px; color: #666; flex:1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.c12-card-footer{
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px; border-top: 1px solid #f0f0f8; background: #fafbff;
}
.c12-card-actions { display: flex; align-items: center; gap: 6px; }
.c12-star-display { color: #f5c842; font-size: 13px; font-weight: 700; }
.c12-star-count  { font-size: 11px; color: #aaa; margin-left: 2px; }
.c12-views       { font-size: 11px; color: #aaa; }
.c12-card-tags   { display: flex; gap: 4px; flex-wrap: wrap; }
.c12-tag         { background: rgba(102,126,234,0.1); color: #5563c1; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.c12-category-chip { display:inline-block; background: linear-gradient(135deg,#f5c842,#f09819); color:#1a1a2e; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; text-transform:uppercase; }
.c12-card-own-badge { background:#e8f5e9; color:#2e7d32; font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px; border:1px solid #a5d6a7; }
.c12-flag-btn   { background:none; border:none; cursor:pointer; color:#ccc; font-size:14px; padding:3px 6px; border-radius:6px; transition:color .15s,background .15s; }
.c12-flag-btn:hover { color:#e74c3c; background:rgba(231,76,60,0.08); }

/* Loader / empty states */
.c12-loader    { text-align:center; padding:24px; color:#999; font-size:14px; }
.c12-feed-end  { text-align:center; padding:18px; color:#aaa; font-size:13px; }
.c12-feed-empty{ text-align:center; padding:40px; color:#aaa; font-size:14px; line-height:1.8; }

/* ── Star rating widget ── */
.c12-star-widget { display:flex; gap:4px; align-items:center; }
.c12-star-btn { background:none; border:none; cursor:pointer; font-size:28px; color:#ddd; transition:color .12s,transform .1s; padding:0; line-height:1; }
.c12-star-btn:hover { color:#f5c842; transform:scale(1.2); }

/* ── Detail modal contents ── */
.c12-detail-header { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; }
.c12-detail-thumb  { width:200px; min-height:120px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#1a1a2e,#533483); display:flex; align-items:center; justify-content:center; font-size:48px; color:rgba(255,255,255,0.3); flex-shrink:0; }
.c12-detail-thumb img { width:100%; height:100%; object-fit:cover; }
.c12-detail-info  { flex:1; min-width:0; }
.c12-detail-title { font-size:1.15em; font-weight:800; color:#1a1a2e; margin-bottom:8px; }
.c12-detail-meta-row { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; color:#777; margin-bottom:8px; }
.c12-detail-desc  { font-size:13px; color:#555; line-height:1.6; margin-bottom:10px; }
.c12-detail-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; background:#f4f6fc; border-radius:10px; padding:12px; margin-bottom:14px; }
.c12-stat-box     { text-align:center; }
.c12-stat-val     { font-size:1.25em; font-weight:800; color:#1a1a2e; }
.c12-stat-lbl     { font-size:11px; color:#999; margin-top:2px; }

/* Estimate data table inside detail modal */
.c12-est-data-table { width:100%; border-collapse:collapse; font-size:12px; margin:12px 0; }
.c12-est-data-table th { background:#1a1a2e; color:#f5c842; padding:7px 10px; text-align:left; font-weight:700; }
.c12-est-data-table td { padding:6px 10px; border-bottom:1px solid #f0f0f8; color:#333; }
.c12-est-data-table tr:nth-child(even) td { background:#fafbff; }
.c12-est-data-table .c12-est-total-row td { font-weight:700; background:#e8f5e9; color:#1a1a2e; border-top:2px solid #27ae60; }

/* Rating section */
.c12-rate-section { background:linear-gradient(135deg,rgba(245,200,66,.07),rgba(240,152,25,.07)); border:1px solid rgba(245,200,66,.3); border-radius:12px; padding:14px; margin-bottom:14px; text-align:center; }
.c12-rate-section h4 { font-size:14px; font-weight:700; color:#1a1a2e; margin:0 0 8px; }
.c12-rate-already { font-size:13px; color:#27ae60; font-weight:600; margin:0; }

/* ── Profile panel ── */
.c12-profile-hero { background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460); border-radius:14px; padding:28px 22px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:18px; box-shadow:0 4px 24px rgba(0,0,0,0.28); }
.c12-profile-avatar { width:76px; height:76px; border-radius:50%; border:3px solid #f5c842; object-fit:cover; }
.c12-profile-info   { flex:1; min-width:0; }
.c12-profile-name   { font-size:1.2em; font-weight:800; color:#fff; margin-bottom:4px; }
.c12-profile-joined { font-size:12px; color:rgba(255,255,255,.55); margin-bottom:8px; }
.c12-reputation-badge { display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,#f5c842,#f09819); color:#1a1a2e; padding:4px 13px; border-radius:20px; font-size:13px; font-weight:800; }
.c12-profile-stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; }
.c12-profile-stat-item { text-align:center; }
.c12-profile-stat-val  { font-size:1.15em; font-weight:800; color:#f5c842; }
.c12-profile-stat-lbl  { font-size:11px; color:rgba(255,255,255,.55); }
.c12-profile-actions   { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.c12-signout-btn { background:rgba(231,76,60,.15); color:#e74c3c; border:1px solid rgba(231,76,60,.3); border-radius:8px; padding:6px 13px; font-size:12px; font-weight:700; cursor:pointer; transition:background .15s; }
.c12-signout-btn:hover { background:rgba(231,76,60,.28); }
.c12-profile-section-title { font-size:.95em; font-weight:800; color:#1a1a2e; margin:18px 0 10px; }
.c12-rated-list  { display:flex; flex-direction:column; gap:7px; }
.c12-rated-item  { display:flex; align-items:center; gap:10px; background:#fff; border-radius:10px; padding:10px 14px; border:1px solid #e8eaf6; cursor:pointer; transition:box-shadow .15s; }
.c12-rated-item:hover { box-shadow:0 4px 16px rgba(26,26,46,.1); }
.c12-rated-item-title { flex:1; font-size:13px; font-weight:700; color:#1a1a2e; }
.c12-rated-item-star  { color:#f5c842; font-size:13px; font-weight:700; }

/* ── Modals ── */
.c12-modal { position:fixed; z-index:2000; inset:0; background:rgba(8,8,24,.65); backdrop-filter:blur(4px); display:flex; align-items:flex-start; justify-content:center; padding:20px 10px; overflow-y:auto; }
.c12-modal-content { 
    background:rgba(255,255,255,.99); 
    border-radius:18px; 
    padding:26px; 
    width:100%; 
    max-height:92vh; 
    overflow-y:auto; 
    box-shadow:0 24px 64px rgba(0,0,0,.4); 
    position:relative; 
    margin:auto; 
    display:flex; 
    flex-direction:column; 
}
.c12-modal-content h2 { font-size:1.05em; font-weight:800; color:#1a1a2e; border-bottom:2px solid #e8eaf6; padding-bottom:10px; margin-bottom:16px; }
.c12-modal-close { position:absolute; top:14px; right:14px; background:rgba(26,26,46,.07); border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; color:#555; transition:background .15s; }
.c12-modal-close:hover { background:rgba(26,26,46,.16); }
.c12-form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.c12-form-group label { font-size:13px; font-weight:700; color:#444; }
.c12-req { color:#e74c3c; }
.c12-input { padding:8px 11px; border:1px solid #d4d8ee; border-radius:8px; font-size:13px; color:#1a1a2e; background:#fff; outline:none; width:100%; font-family:inherit; transition:border-color .2s, box-shadow .2s; }
.c12-input:focus { border-color:#667eea; box-shadow:0 0 0 3px rgba(102,126,234,.15); }
.c12-status-msg { padding:9px 13px; border-radius:8px; font-size:13px; font-weight:600; display:none; }
.c12-status-ok   { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.c12-status-err  { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.c12-status-info { background:#d1ecf1; color:#0c5460; border:1px solid #bee5eb; }
.c12-status-warn { background:#fff3cd; color:#856404; border:1px solid #ffeeba; }

/* ── Global loader ── */
.c12-global-loader { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; display:flex; align-items:center; justify-content:center; }
.c12-spinner { width:42px; height:42px; border:4px solid rgba(255,255,255,.2); border-top-color:#f5c842; border-radius:50%; animation:c12spin .75s linear infinite; }
@keyframes c12spin { to { transform:rotate(360deg); } }
.c12-inline-spin { display:inline-block; width:15px; height:15px; border:2px solid rgba(26,26,46,.15); border-top-color:#667eea; border-radius:50%; animation:c12spin .7s linear infinite; vertical-align:middle; margin-right:4px; }

/* ── Load template banner ── */
.c12-load-banner { position:fixed; bottom:0; left:0; right:0; background:linear-gradient(135deg,#1565c0,#1a237e); color:#fff; padding:11px 18px; z-index:9998; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; box-shadow:0 -4px 20px rgba(0,0,0,.3); }
.c12-load-banner p { font-size:13px; font-weight:600; margin:0; }

/* ── Reputation inline badge ── */
.c12-rep-inline { display:inline-block; background:linear-gradient(135deg,#f5c842,#f09819); color:#1a1a2e; font-size:10px; font-weight:800; padding:1px 5px; border-radius:7px; vertical-align:middle; margin-left:3px; }

/* ── Responsive ── */
@media (max-width:768px) {
    .c12-nav { 
        padding: 8px; 
        flex-direction: row; 
        justify-content: space-between;
    }
    .c12-nav-center { 
        order: 3; 
        width: 100%; 
        justify-content: center; 
        margin-top: 5px;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 5px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .c12-nav-btn { 
        padding: 6px 10px; 
        font-size: 11px; 
        flex-shrink: 0;
    }
    .c12-nav-username { display:none; }
    
    /* Hide filters bar on tablet/mobile, show toggle button instead */
    #c12-filter-toggle-bar { display:block !important; border-radius: 0; border-bottom: 1px solid #eee; }
    .c12-filters-bar { 
        display:none; 
        flex-direction:column; 
        gap:10px; 
        top:0; /* Adjust sticky top if needed */
        position: relative;
        padding: 15px;
        box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
    }
    .c12-filters-bar.c12-filters-open { display:flex; }
    .c12-filter-input, .c12-filter-select { width:100% !important; flex:unset; font-size: 14px; padding: 10px; }
    
    .c12-feed-grid { grid-template-columns:1fr; gap: 16px; padding: 10px; }
    .c12-card { margin-bottom: 5px; }
    .c12-detail-header { flex-direction: column; align-items: center; text-align: center; }
    .c12-detail-thumb { width:100%; height:180px; max-width: 100%; }
    .c12-detail-stats { grid-template-columns: 1fr 1fr; }
    .c12-profile-hero { flex-direction:column; text-align:center; padding: 20px 15px; gap: 15px; }
    .c12-profile-stats { justify-content:center; width: 100%; }
    .c12-auth-card { padding:32px 20px; margin: 10px; }
    .c12-modal-content { 
        padding:20px; 
        border-radius: 12px; 
        width: 98%; 
        max-height: 92vh; 
        overflow-y: auto;
    }
    
    /* Ensure tables inside modals scroll horizontally */
    .c12-modal-content table {
        min-width: 500px;
    }
    .c12-modal-content .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -5px;
        padding-bottom: 10px;
    }
    .c12-modal-content table {
        min-width: 500px;
    }
    .c12-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -5px;
        padding-bottom: 10px;
    }
}
@media (max-width:480px) {
    .c12-nav-center { gap:2px; padding: 5px 0; }
    .c12-nav-btn { padding: 5px 7px; font-size: 10.5px; }
    .c12-detail-stats { grid-template-columns:1fr; }
    
    .c12-filter-input, .c12-filter-select { width:100% !important; padding:10px; }
    .c12-section-header { flex-direction: column; align-items: flex-start; gap: 5px; }
}

/* ── Generic Responsive Table ── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.table-responsive table {
    min-width: 600px;
}