/* ==========================================================================
   Syntro Build AI — Interactive Template Browser CSS  (Module 5)
   Extends dashboard.css tokens. No duplicate frameworks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.brw-body {
    background: var(--c-bg);
    color:      var(--c-text);
    min-height: 100vh;
    overflow:   hidden;
}

.brw-layout {
    display:    flex;
    height:     calc(100vh - var(--navbar-h));
    margin-top: var(--navbar-h);
    overflow:   hidden;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.brw-sidebar {
    width:        280px;
    min-width:    280px;
    border-right: 1px solid var(--c-border);
    background:   var(--c-surface);
    display:      flex;
    flex-direction: column;
    overflow-y:   auto;
    transition:   width var(--transition), min-width var(--transition);
    flex-shrink:  0;
}

.brw-sidebar--collapsed { width: 44px; min-width: 44px; }

.brw-sidebar__inner { padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 1rem; }

.brw-sidebar__collapse-btn {
    align-self:    flex-end;
    width:         28px;
    height:        28px;
    border:        1px solid var(--c-border);
    border-radius: var(--radius-md);
    background:    var(--c-surface-2);
    color:         var(--c-text-2);
    font-size:     1rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background var(--transition);
    flex-shrink:   0;
}

.brw-sidebar__collapse-btn:hover { background: var(--c-border); color: var(--c-text); }

/* Search */
.brw-search-wrap { position: relative; }

.brw-search-icon {
    position:       absolute;
    left:           0.6rem;
    top:            50%;
    transform:      translateY(-50%);
    color:          var(--c-text-3);
    pointer-events: none;
}

.brw-search {
    width:         100%;
    padding:       0.5rem 0.6rem 0.5rem 2rem;
    border:        1px solid var(--c-border);
    border-radius: var(--radius-full);
    background:    var(--c-surface-2);
    color:         var(--c-text);
    font-size:     0.85rem;
    outline:       none;
    transition:    border-color var(--transition), box-shadow var(--transition);
}

.brw-search:focus {
    border-color: var(--c-brand);
    box-shadow:   0 0 0 3px var(--c-brand-glow);
}

/* Filter groups */
.brw-filter-group__label {
    font-size:    0.7rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:        var(--c-text-3);
    margin-bottom: 0.5rem;
}

.brw-filter-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.brw-filter-btn {
    padding:       0.3rem 0.65rem;
    border:        1px solid var(--c-border);
    border-radius: var(--radius-full);
    background:    var(--c-surface-2);
    color:         var(--c-text-2);
    font-size:     0.78rem;
    font-weight:   500;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    all var(--transition);
}

.brw-filter-btn:hover { border-color: var(--c-brand); color: var(--c-brand); background: rgba(99,102,241,.06); }
.brw-filter-btn--active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.brw-filter-btn--active:hover { background: var(--c-brand-hover); }

/* Sort */
.brw-sort-select {
    width:         100%;
    padding:       0.4rem 0.6rem;
    border:        1px solid var(--c-border);
    border-radius: var(--radius-md);
    background:    var(--c-surface-2);
    color:         var(--c-text);
    font-size:     0.85rem;
    cursor:        pointer;
    outline:       none;
}

.brw-clear-btn {
    width:         100%;
    padding:       0.4rem 0;
    border:        1px solid var(--c-border);
    border-radius: var(--radius-md);
    background:    transparent;
    color:         var(--c-text-3);
    font-size:     0.8rem;
    cursor:        pointer;
    transition:    background var(--transition), color var(--transition);
}

.brw-clear-btn:hover { background: var(--c-surface-2); color: var(--c-text); }

.brw-result-count { font-size: 0.75rem; color: var(--c-text-3); }

/* --------------------------------------------------------------------------
   Content area
   -------------------------------------------------------------------------- */
.brw-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.brw-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         0.75rem 1.25rem;
    border-bottom:   1px solid var(--c-border);
    background:      var(--c-surface);
    flex-shrink:     0;
    flex-wrap:       wrap;
}

.brw-toolbar__left  { display: flex; align-items: center; gap: 0.75rem; }
.brw-toolbar__right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.brw-toolbar__title { font-size: 1.1rem; font-weight: 700; color: var(--c-text); }

.brw-back-link {
    font-size:       0.82rem;
    color:           var(--c-text-2);
    text-decoration: none;
    padding:         0.3rem 0.7rem;
    border:          1px solid var(--c-border);
    border-radius:   var(--radius-md);
    transition:      background var(--transition), color var(--transition);
}

.brw-back-link:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }

/* View toggle */
.brw-view-toggle { display: flex; gap: 2px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 2px; }

.brw-view-btn {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         30px;
    height:        30px;
    border:        none;
    border-radius: calc(var(--radius-md) - 2px);
    background:    transparent;
    color:         var(--c-text-2);
    cursor:        pointer;
    transition:    background var(--transition), color var(--transition);
}

.brw-view-btn:hover { background: var(--c-border); color: var(--c-text); }
.brw-view-btn--active { background: var(--c-brand); color: #fff; }
.brw-view-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Device switcher */
.brw-device-switcher { display: flex; gap: 2px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 2px; }

.brw-device-btn {
    display:       flex;
    align-items:   center;
    gap:           0.3rem;
    padding:       0.3rem 0.65rem;
    border:        none;
    border-radius: calc(var(--radius-md) - 2px);
    background:    transparent;
    color:         var(--c-text-2);
    font-size:     0.78rem;
    font-weight:   500;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background var(--transition), color var(--transition);
}

.brw-device-btn:hover { background: var(--c-border); color: var(--c-text); }
.brw-device-btn--active { background: var(--c-brand); color: #fff; }

/* Use button */
.brw-use-btn {
    display:       inline-flex;
    align-items:   center;
    padding:       0.45rem 1.1rem;
    background:    var(--c-brand);
    color:         #fff;
    border:        none;
    border-radius: var(--radius-full);
    font-size:     0.875rem;
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background var(--transition), transform var(--transition);
}

.brw-use-btn:hover  { background: var(--c-brand-hover); }
.brw-use-btn:active { transform: scale(0.96); }
.brw-use-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Grid view
   -------------------------------------------------------------------------- */
.brw-grid-view {
    flex:       1;
    overflow-y: auto;
    padding:    1.25rem;
    display:    flex;
    flex-direction: column;
    gap:        1.5rem;
}

.brw-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   1.25rem;
}

/* Card */
.brw-card {
    border:        1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background:    var(--c-surface);
    overflow:      hidden;
    cursor:        pointer;
    transition:    box-shadow var(--transition), border-color var(--transition), transform var(--transition);
    animation:     cardIn 200ms ease both;
}

@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.brw-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); border-color: var(--c-brand); transform: translateY(-2px); }
.brw-card--selected { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-glow); }

.brw-card__thumb-wrap { position: relative; aspect-ratio: 16/10; background: var(--c-surface-2); overflow: hidden; }

.brw-card__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms; }
.brw-card:hover .brw-card__thumb { transform: scale(1.04); }

.brw-card__palette { position: absolute; bottom: 0.4rem; left: 0.4rem; display: flex; gap: 3px; }
.brw-card__swatch { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.2); }

.brw-card__overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(0,0,0,.55);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    opacity:         0;
    transition:      opacity 200ms;
    backdrop-filter: blur(3px);
}

.brw-card:hover .brw-card__overlay { opacity: 1; }

.brw-card__preview-btn {
    padding:       0.45rem 1rem;
    background:    rgba(255,255,255,.18);
    color:         #fff;
    border:        1px solid rgba(255,255,255,.4);
    border-radius: var(--radius-full);
    font-size:     0.82rem;
    cursor:        pointer;
    transition:    background var(--transition);
}

.brw-card__preview-btn:hover { background: rgba(255,255,255,.3); }

.brw-card__use-btn {
    padding:       0.45rem 1rem;
    background:    var(--c-brand);
    color:         #fff;
    border:        none;
    border-radius: var(--radius-full);
    font-size:     0.82rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--transition);
}

.brw-card__use-btn:hover { background: var(--c-brand-hover); }

.brw-card__meta { padding: 0.8rem 0.9rem 0.9rem; }
.brw-card__name { font-size: 0.95rem; font-weight: 700; color: var(--c-text); margin-bottom: 0.2rem; }
.brw-card__desc { font-size: 0.78rem; color: var(--c-text-2); line-height: 1.45; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brw-card__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.35rem; }
.brw-card__sections { font-size: 0.7rem; color: var(--c-text-3); }

/* Skeleton */
.brw-skeleton { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-border); animation: skPulse 1.4s ease-in-out infinite; }
@keyframes skPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.brw-skeleton__thumb { aspect-ratio: 16/10; background: var(--c-surface-2); }
.brw-skeleton__meta { padding: 0.8rem 0.9rem; }
.brw-skeleton__line { height: 12px; background: var(--c-surface-2); border-radius: 4px; margin-bottom: 0.45rem; }
.brw-skeleton__line--title { width: 65%; height: 15px; }
.brw-skeleton__line--desc  { width: 88%; }

/* Empty */
.brw-empty { text-align: center; padding: 4rem 1rem; color: var(--c-text-2); }
.brw-empty__icon  { font-size: 2.5rem; margin-bottom: 0.75rem; }
.brw-empty__title { font-size: 1.15rem; font-weight: 600; color: var(--c-text); margin-bottom: 0.4rem; }
.brw-empty__text  { font-size: 0.875rem; margin-bottom: 1rem; }
.brw-empty__reset { padding: 0.45rem 1.2rem; background: var(--c-brand); color: #fff; border: none; border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background var(--transition); }
.brw-empty__reset:hover { background: var(--c-brand-hover); }

/* Pagination */
.brw-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.3rem; }

.brw-page-btn {
    min-width:     34px;
    height:        34px;
    padding:       0 0.55rem;
    border:        1px solid var(--c-border);
    border-radius: var(--radius-md);
    background:    var(--c-surface);
    color:         var(--c-text-2);
    font-size:     0.82rem;
    cursor:        pointer;
    transition:    all var(--transition);
}

.brw-page-btn:hover { border-color: var(--c-brand); color: var(--c-brand); }
.brw-page-btn--active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); font-weight: 700; }
.brw-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.brw-page-ellipsis { font-size: 0.82rem; color: var(--c-text-3); padding: 0 0.2rem; }

/* --------------------------------------------------------------------------
   Preview view
   -------------------------------------------------------------------------- */
.brw-preview-view {
    flex:           1;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    background:     var(--c-bg);
}

.brw-no-preview {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    color:           var(--c-text-2);
}

.brw-no-preview__icon { font-size: 2.5rem; }
.brw-no-preview__text { font-size: 0.95rem; }

.brw-no-preview__btn {
    padding:       0.45rem 1.2rem;
    background:    var(--c-brand);
    color:         #fff;
    border:        none;
    border-radius: var(--radius-full);
    font-size:     0.875rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--transition);
}

.brw-no-preview__btn:hover { background: var(--c-brand-hover); }

/* Device wrapper */
.brw-device-wrap {
    flex:            1;
    overflow:        auto;
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
    padding:         1.5rem;
}

/* Frame base */
.brw-frame { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   Desktop frame
   -------------------------------------------------------------------------- */
.brw-frame--desktop { width: 100%; max-width: 1100px; }

.brw-frame__chrome--desktop {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0 0.75rem;
    height:        38px;
    background:    #f0f0f0;
    border-radius: 10px 10px 0 0;
    border:        1px solid #d1d5db;
    border-bottom: none;
}

.dark .brw-frame__chrome--desktop { background: #1e1e1e; border-color: #3a3a3a; }

.brw-frame__dots { display: flex; gap: 6px; }
.brw-frame__dot { width: 12px; height: 12px; border-radius: 50%; }
.brw-frame__dot--red    { background: #ff5f57; }
.brw-frame__dot--yellow { background: #febc2e; }
.brw-frame__dot--green  { background: #28c840; }

.brw-frame__url-bar {
    flex:           1;
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    background:     #fff;
    border:         1px solid #d1d5db;
    border-radius:  6px;
    padding:        0.2rem 0.7rem;
    font-size:      0.75rem;
    color:          #6b7280;
    max-width:      320px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.dark .brw-frame__url-bar { background: #2a2a2a; border-color: #444; color: #9ca3af; }

.brw-frame__chrome-actions { display: flex; gap: 4px; margin-left: auto; }

.brw-frame__reload,
.brw-frame__fullscreen {
    background: none;
    border:     none;
    cursor:     pointer;
    font-size:  0.9rem;
    color:      #6b7280;
    padding:    2px 4px;
    border-radius: 4px;
    transition: background var(--transition), color var(--transition);
}

.brw-frame__reload:hover,
.brw-frame__fullscreen:hover { background: rgba(0,0,0,.08); color: var(--c-text); }

.brw-frame__viewport {
    position:  relative;
    border:    1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow:  hidden;
    background: #fff;
    height:    620px;
}

.dark .brw-frame__viewport { border-color: #3a3a3a; background: #121212; }

/* --------------------------------------------------------------------------
   Tablet frame
   -------------------------------------------------------------------------- */
.brw-frame--tablet { align-items: center; }

.brw-frame__bezel--tablet {
    background:    #1a1a1a;
    border-radius: 20px;
    padding:       18px 14px 28px;
    box-shadow:    0 0 0 2px #333, 0 20px 60px rgba(0,0,0,.35);
    display:       flex;
    flex-direction: column;
    gap:           8px;
}

.brw-frame__tablet-bar {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.2rem 0.3rem;
    background:  #2a2a2a;
    border-radius: 8px;
}

.brw-frame__url-bar--tablet {
    flex:           1;
    background:     #1a1a1a;
    border:         1px solid #444;
    border-radius:  6px;
    padding:        0.25rem 0.5rem;
    font-size:      0.7rem;
    color:          #9ca3af;
    text-align:     center;
    overflow:       hidden;
    white-space:    nowrap;
    text-overflow:  ellipsis;
}

.brw-frame__viewport--tablet {
    width:         768px;
    height:        900px;
    border:        none;
    border-radius: 8px;
    overflow:      hidden;
    background:    #fff;
    position:      relative;
}

.brw-frame__home-btn {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    background:    #2a2a2a;
    border:        2px solid #444;
    align-self:    center;
    margin-top:    4px;
}

/* --------------------------------------------------------------------------
   Mobile frame
   -------------------------------------------------------------------------- */
.brw-frame--mobile { align-items: center; }

.brw-frame__bezel--mobile {
    background:    #111;
    border-radius: 44px;
    padding:       14px 10px 22px;
    box-shadow:    0 0 0 2px #333, inset 0 0 0 2px #2a2a2a, 0 20px 60px rgba(0,0,0,.45);
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           8px;
}

.brw-frame__notch {
    width:         110px;
    height:        24px;
    background:    #111;
    border-radius: 0 0 16px 16px;
    position:      absolute;
    top:           14px;
    left:          50%;
    transform:     translateX(-50%);
    z-index:       2;
}

.brw-frame__viewport--mobile {
    position:      relative;
    width:         375px;
    height:        750px;
    border-radius: 32px;
    overflow:      hidden;
    background:    #fff;
}

.brw-frame__home-btn--mobile {
    width:         100px;
    height:        4px;
    border-radius: 2px;
    background:    #444;
    margin-top:    4px;
}

/* --------------------------------------------------------------------------
   Iframe + loading state
   -------------------------------------------------------------------------- */
.brw-frame__loading {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    background:      var(--c-bg);
    font-size:       0.85rem;
    color:           var(--c-text-2);
    z-index:         10;
}

.brw-frame__spinner {
    width:  28px;
    height: 28px;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-brand);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

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

.brw-frame__iframe {
    width:   100%;
    height:  100%;
    border:  none;
    display: block;
}

.brw-frame__iframe--hidden { visibility: hidden; }

/* --------------------------------------------------------------------------
   Preview info strip
   -------------------------------------------------------------------------- */
.brw-preview-info {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             0.75rem;
    padding:         0.65rem 1.25rem;
    border-top:      1px solid var(--c-border);
    background:      var(--c-surface);
    flex-shrink:     0;
}

.brw-preview-info__left  { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.brw-preview-info__right { display: flex; align-items: center; gap: 0.5rem; }

.brw-preview-info__name { font-size: 0.9rem; font-weight: 700; color: var(--c-text); }

.brw-back-to-grid {
    padding:       0.4rem 0.85rem;
    border:        1px solid var(--c-border);
    border-radius: var(--radius-full);
    background:    var(--c-surface-2);
    color:         var(--c-text-2);
    font-size:     0.82rem;
    cursor:        pointer;
    transition:    background var(--transition), color var(--transition);
}

.brw-back-to-grid:hover { background: var(--c-border); color: var(--c-text); }

.brw-use-btn--info { font-size: 0.875rem; padding: 0.45rem 1.1rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .brw-frame--tablet .brw-frame__viewport--tablet { width: 680px; height: 820px; }
    .brw-device-btn span { display: none; }
}

@media (max-width: 768px) {
    .brw-sidebar { width: 240px; min-width: 240px; }
    .brw-sidebar--collapsed { width: 0; min-width: 0; border-right: none; }
    .brw-frame--desktop .brw-frame__viewport { height: 480px; }
    .brw-toolbar { padding: 0.6rem 0.9rem; gap: 0.5rem; }
}

@media (max-width: 600px) {
    .brw-layout { flex-direction: column; }
    .brw-sidebar { width: 100%; min-width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--c-border); }
    .brw-sidebar--collapsed { height: 0; overflow: hidden; padding: 0; }
    .brw-grid { grid-template-columns: 1fr 1fr; }
}