/* App shell — sidebar + main */
.app-shell {
  display: flex;
  min-height: 100dvh;
  background: transparent;
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  transform: translateX(-100%);
  transition: transform 200ms ease;
}

.app-sidebar.open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .app-sidebar {
    transform: translateX(0);
    position: sticky;
    top: 0;
    height: 100dvh;
  }
}

.app-main-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 0;
}

.app-topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(18px);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 30;
}

.app-content {
  flex: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  margin: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  border: none;
  background: transparent;
  width: calc(100% - 1.25rem);
  text-align: left;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 160, 18, 0.5);
}

.nav-item.active {
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: 500;
}

.view-panel {
  display: none;
}

.view-panel.active {
  display: block;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 35;
}

.sidebar-overlay.open {
  display: block;
}

@media (min-width: 1024px) {
  .sidebar-overlay { display: none !important; }
}

/* Slide-over panels */
.slide-over-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}

.slide-over-backdrop.hidden {
  display: none !important;
}

.slide-over-panel {
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  height: 100dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  animation: slide-in 200ms ease;
}

@keyframes slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .slide-over-panel { animation: none; }
}

/* Data table */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-elevated);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
}

.data-table tbody tr:nth-child(even) {
  background: rgba(148, 163, 184, 0.03);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

/* Buttons */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-ghost:active {
  transform: translateY(1px);
}

.btn-ghost:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 160, 18, 0.5);
}

/* Platform brand icons */
.platform-icon { width: 2rem; height: 2rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.platform-icon--fb { background: #1877F2; color: #fff; }
.platform-icon--li { background: #0A66C2; color: #fff; }
.platform-icon--yt { background: #FF0000; color: #fff; }
.platform-icon--tt { background: #000; color: #fff; border: 1px solid var(--border-default); }
.platform-icon--ig { background: #E4405F; color: #fff; }

/* Spin for loading */
.ph-spin { animation: ph-spin 1s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}

.empty-state .ph { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.6; }

/* Settings tabs */
.settings-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1rem; }
.settings-tab {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; }

/* Schedule drag */
.schedule-item[draggable="true"] { cursor: grab; }
.schedule-item.dragging { opacity: 0.5; }
.cal-drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Page titles */
.page-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }


@media (min-width: 1280px) {
  .app-content { padding: 1.5rem 2rem 3rem; }
}

.surface-card { backdrop-filter: blur(14px); }

.nav-item i { font-size: 1.05rem; }

.nav-section-label {
  padding: 0.75rem 1.25rem 0.35rem;
  font-size: 0.66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Thanh cong cu + bo loc danh sach Reels ─────────────────────────────
   Ban truoc dung mot luoi grid-cols-2 lai voi sm:flex, cong style inline ngay
   tren tung nut, va sau chip loc nam thanh mot hang phang. Nhin vao khong biet
   "Có TTS" va "Chưa TTS" la mot cap loai tru nhau, con tren dien thoai thi ca
   sau chip xuong dong lom com.

   Gio moi tieu chi la mot segmented control ba trang thai (Tất cả / Có / Chưa):
   the hien dung ngu nghia HOAC-trong-nhom cua bo loc, va bo han duoc trang thai
   "bat ca hai" vo nghia. */
.reels-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  width: 100%;
}

.reels-toolbar__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  min-width: 0;
}

.reels-toolbar__search,
.reels-toolbar__sort {
  min-width: 0;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.reels-toolbar__sort { color-scheme: dark light; }

.reels-toolbar__search:focus-visible,
.reels-toolbar__sort:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.reels-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex: 1 1 100%;
}

.filter-group__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 4.25rem;
}

/* Segmented control */
.seg {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-panel);
}

.seg__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.seg__btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.seg__btn[data-active="1"] {
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: 600;
}

.seg__btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.reels-filters__clear {
  flex: 0 0 auto;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--status-danger);
  font-size: 0.625rem;
  font-weight: 600;
  cursor: pointer;
}

.reels-filters__clear:hover { background: var(--bg-hover); }

/* >= 640px: cac o dieu khien nam ngang, moi nhom loc chiem mot cot */
@media (min-width: 640px) {
  .reels-toolbar__controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) auto;
    align-items: center;
  }
  .filter-group { flex: 0 1 auto; }
  .seg { flex: 0 0 auto; }
  .seg__btn { padding: 0.25rem 0.75rem; }
}

/* >= 1280px: toan bo thanh cong cu don ve ben phai tieu de */
@media (min-width: 1280px) {
  .reels-toolbar { width: auto; align-items: flex-end; }
  .reels-toolbar__controls { grid-template-columns: minmax(0, 14rem) minmax(0, 11rem) auto; }
  .reels-filters { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .seg__btn { transition: none; }
}