/**
 * Smart Road Reporter V2 - Frontend Styles
 * تصميم الواجهة الأمامية، شامل الخطوط، الألوان، والأقسام الجديدة (AI و Ticker)
 */

/* 1. الحاوية الرئيسية والخط المخصص */
.srr-v2-report-container {
    font-family: 'IBMPlexSansArabic', Tahoma, Arial, sans-serif !important;
    direction: rtl;
    text-align: right;
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    color: #333;
    line-height: 1.6;
}

.srr-v2-report-container * {
    font-family: inherit; /* إجبار جميع العناصر الداخلية على وراثة الخط */
    box-sizing: border-box;
}

/* 2. الهيدر والوقت */
.srr-v2-main-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.srr-v2-title {
    font-size: 2.2em;
    font-weight: bold;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.srr-v2-meta-time {
    font-size: 1.1em;
    color: #666;
    background: #f8f9fa;
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    border: 1px solid #eee;
}

/* 3. شريط التحديثات الحي (Ticker) */
.srr-v2-ticker-box {
    display: flex;
    align-items: center;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 6px;
    padding: 10px 15px;
    margin-top: 20px;
    overflow: hidden;
}

.srr-v2-ticker-label {
    font-weight: bold;
    color: #856404;
    white-space: nowrap;
    margin-left: 15px;
}

.srr-v2-ticker-content {
    flex-grow: 1;
    overflow: hidden;
}

#srr-v2-ticker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    animation: srr-ticker 20s linear infinite;
}

#srr-v2-ticker-list li {
    white-space: nowrap;
    margin-left: 30px;
    color: #856404;
    font-size: 0.95em;
}

@keyframes srr-ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* 4. البحث السريع */
.srr-v2-search-wrapper {
    margin-top: 20px;
}

#srr-v2-search-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s ease;
    background: #fdfdfd;
}

#srr-v2-search-input:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
    outline: none;
}

/* 5. الأكورديون والمناطق (المدن) */
.srr-v2-city-section {
    margin-bottom: 15px;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.srr-v2-city-header {
    background: #f8f9fa;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
}

.srr-v2-city-header:hover {
    background: #f1f3f5;
}

.srr-v2-city-header h2 {
    margin: 0;
    font-size: 1.3em;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.srr-v2-collapse-icon {
    font-size: 0.9em;
    color: #888;
}

.srr-v2-collapsible-content {
    display: none; /* مغلق افتراضياً */
    padding: 15px 20px;
    border-top: 1px solid #e2e4e7;
}

/* 6. قائمة الطرق */
.srr-v2-road-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.srr-v2-road-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
    gap: 15px;
}

.srr-v2-road-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.srr-v2-road-info {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.srr-v2-road-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #34495e;
}

.srr-v2-status-icon {
    font-size: 1.3em;
}

/* 7. التفاعل وتغيير الحالة */
.srr-v2-road-actions {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 250px;
}

.srr-v2-status-select,
.srr-v2-custom-input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95em;
    flex-grow: 1;
}

.srr-v2-custom-input {
    background: #fdfdfd;
}

.srr-hidden {
    display: none !important;
}

.srr-v2-status-message {
    width: 100%;
    font-size: 0.85em;
    font-weight: bold;
    text-align: left;
    height: 15px;
}

/* 8. الأزرار العامة */
.srr-v2-main-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
}

.srr-v2-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-grow: 1;
}

.srr-v2-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.srr-v2-btn-primary { background: #007cba; color: #fff; }
.srr-v2-btn-primary:hover:not(:disabled) { background: #006ba1; }

.srr-v2-btn-secondary { background: #6c757d; color: #fff; }
.srr-v2-btn-secondary:hover:not(:disabled) { background: #5a6268; }

.srr-v2-btn-warning { background: #f0b849; color: #fff; }
.srr-v2-btn-warning:hover:not(:disabled) { background: #e0a800; }

.srr-v2-feedback {
    margin-top: 15px;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}

.srr-v2-container{max-width:1320px !important; margin:0 auto; position:relative; padding-inline:16px; padding-top:0 !important; box-sizing:border-box;}
.srr-front-tabs-wrap{display:none !important;}
.srr-front-floating-nav{position:fixed !important; top:50% !important; right:16px !important; left:auto !important; bottom:auto !important; transform:translateY(-50%) !important; z-index:2147483000 !important; display:flex !important; flex-direction:column !important; gap:6px !important; align-items:center !important; justify-content:center !important; width:52px !important; max-width:52px !important; pointer-events:auto;}
.srr-front-tab-btn{width:52px !important; height:52px !important; min-width:52px !important; min-height:52px !important; max-width:52px !important; max-height:52px !important; padding:0 !important; margin:0 !important; border:none; border-radius:999px !important; cursor:pointer; background:#eef1f7; color:#475569; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; display:inline-flex !important; justify-content:center !important; align-items:center !important; box-shadow:0 4px 15px rgba(0,0,0,.15); position:relative; flex:0 0 52px !important;}
.srr-front-fab-btn .srr-front-fab-icon{font-size:20px; line-height:1; flex:0 0 auto}
.srr-front-fab-btn .srr-front-fab-label,.srr-hidden-label{display:none !important;}
.srr-front-tab-btn:hover{transform:scale(1.08); box-shadow:0 8px 20px rgba(15,23,42,.18)}
.srr-front-tab-btn.active{background:var(--tab-accent,#da251d) !important; color:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.24)}
.srr-front-tab-btn::before{content:attr(title); position:absolute; right:62px; top:50%; transform:translateY(-50%); background:#1e293b; color:#fff; padding:6px 12px; border-radius:6px; font-size:13px; font-weight:700; line-height:1; white-space:nowrap; opacity:0; pointer-events:none; transition:.25s; box-shadow:0 4px 6px rgba(0,0,0,.12)}
.srr-front-tab-btn::after{content:''; position:absolute; right:56px; top:50%; transform:translateY(-50%); border-width:5px 0 5px 5px; border-style:solid; border-color:transparent transparent transparent #1e293b; opacity:0; transition:.25s}
.srr-front-tab-btn:hover::before,.srr-front-tab-btn:hover::after{opacity:1}
#srr-tab-roads .srr-v2-capture-area, #srr-tab-notices .srr-v2-notice-module, #srr-tab-field-images .srr-v2-fi-module, #srr-tab-field-videos .srr-v2-fv-module, #srr-tab-roads .srr-v2-action-buttons{max-width:920px; margin-left:auto; margin-right:auto}
@media (max-width:1100px){.srr-v2-container{padding-top:0 !important}.srr-front-floating-nav{top:50% !important; right:14px !important}}
@media (max-width:768px){.srr-v2-container{padding-inline:12px; padding-top:0 !important}.srr-front-floating-nav{top:50% !important; right:12px !important; width:48px !important; max-width:48px !important; gap:6px !important}.srr-front-tab-btn{width:48px !important; height:48px !important; min-width:48px !important; min-height:48px !important; max-width:48px !important; max-height:48px !important; flex:0 0 48px !important}.srr-front-fab-btn .srr-front-fab-icon{font-size:18px}.srr-front-tab-btn::before,.srr-front-tab-btn::after{display:none}}
@media (max-width:420px){.srr-v2-container{padding-top:0 !important}.srr-front-floating-nav{top:50% !important; right:10px !important}}



/* 9. Final QA polish */
:root {
    --srr-ui-primary: #2563eb;
    --srr-ui-primary-strong: #1d4ed8;
    --srr-ui-success: #059669;
    --srr-ui-warning: #d97706;
    --srr-ui-danger: #be3d36;
    --srr-ui-surface: #ffffff;
    --srr-ui-surface-soft: #f8fafc;
    --srr-ui-border: #dbe4ee;
    --srr-ui-text: #0f172a;
    --srr-ui-muted: #64748b;
}
.srr-v2-container {
    max-width: 1340px !important;
}
.srr-front-floating-nav,
.srr-floating-menu {
    gap: 8px !important;
}
.srr-front-tab-btn,
.srr-float-btn {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14) !important;
}
.srr-front-tab-btn.active {
    background: var(--tab-accent, #c6534b) !important;
}
.srr-v2-dynamic-btn,
.srr-v2-custom-btn,
#srr-fi-btn-generate,
#srr-fv-btn-generate,
#srr-ne-btn-generate,
.srr-inline-action-btn,
.srr-preview-action-btn {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease !important;
}
.srr-v2-dynamic-btn:hover,
.srr-v2-custom-btn:hover,
#srr-fi-btn-generate:hover,
#srr-fv-btn-generate:hover,
#srr-ne-btn-generate:hover,
.srr-inline-action-btn:hover,
.srr-preview-action-btn:hover {
    transform: translateY(-1px);
    filter: brightness(.98);
}
.srr-v2-dynamic-btn:active,
.srr-v2-custom-btn:active,
#srr-fi-btn-generate:active,
#srr-fv-btn-generate:active,
#srr-ne-btn-generate:active,
.srr-inline-action-btn:active,
.srr-preview-action-btn:active {
    transform: translateY(0);
}
.srr-v2-dynamic-btn.is-busy,
.srr-v2-custom-btn.is-busy,
#srr-fi-btn-generate.is-busy,
#srr-fv-btn-generate.is-busy,
#srr-ne-btn-generate.is-busy {
    opacity: .88;
    pointer-events: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10), 0 12px 28px rgba(15, 23, 42, .14) !important;
}
.srr-v2-dynamic-btn.is-success,
.srr-v2-custom-btn.is-success,
.srr-preview-action-btn.is-success {
    box-shadow: 0 0 0 4px rgba(5, 150, 105, .12), 0 12px 28px rgba(15, 23, 42, .16) !important;
}
@media (max-width: 992px) {
    .srr-front-floating-nav { right: 14px !important; }
}
@media (max-width: 768px) {
    .srr-front-floating-nav,
    .srr-floating-menu { gap: 8px !important; }
}