/* mobile-mockup.css - Styles for InfoPi mobile mock-up */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Nếu dùng Be Vietnam Pro, thêm tương tự */
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #FFFFFF;
  color: #424242;
}
.app-bar {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.app-bar .back-btn {
  background: none;
  border: none;
  font-size: 20px;
  margin-right: 8px;
  cursor: pointer;
}
.title-area {
  display: flex;
  align-items: center;
}
.logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #6A1B9A;
  margin-right: 8px;
}
.app-title {
  font-family: 'Inter', 'Be Vietnam Pro', Roboto, 'Noto Sans', Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  color: #212121;
}
main {
  padding: 16px;
}
.categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
}
.pill {
  padding: 8px 12px;
  border: 1px solid #D1C4E9;
  background: #F5F5F5;
  border-radius: 16px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.pill.active {
  background: #6A1B9A;
  color: #FFFFFF;
  border-color: #6A1B9A;
}
.topics-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.topic-card {
  background: #F5F5F5;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Category left border colors */
.topic-card.category-dapps { border-left: 4px solid #7E57C2; }
.topic-card.category-node { border-left: 4px solid #26A69A; }
.topic-card.category-docker { border-left: 4px solid #42A5F5; }
.topic-card.category-general { border-left: 4px solid #9E9E9E; }
.topic-card.category-trading { border-left: 4px solid #FF7043; }
.topic-card.category-mainnet { border-left: 4px solid #FFCA28; }
.topic-header .topic-title {
  font-family: 'Inter', 'Be Vietnam Pro', Roboto, 'Noto Sans', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #212121;
  margin-bottom: 4px;
}
.topic-meta {
  font-size: 12px;
  color: #9E9E9E;
  margin-bottom: 8px;
}
.topic-stats span {
  font-size: 14px;
  margin-right: 12px;
}
.topic-tags {
  display: flex;
  gap: 4px;
  margin: 8px 0;
}
.tag {
  background: #E1BEE7;
  color: #4A148C;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
}
.topic-footer .read-more {
  background: none;
  border: none;
  color: #6A1B9A;
  font-size: 14px;
  cursor: pointer;
}
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  background: #FFFFFF;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  font-size: 12px;
  color: #9E9E9E;
  cursor: pointer;
}
.nav-item span:first-child {
  font-size: 20px;
}
.nav-item.active {
  color: #6A1B9A;
}
.nav-item.create-btn {
  background: #6A1B9A;
  color: #FFFFFF;
  padding: 8px;
  border-radius: 50%;
  transform: translateY(-4px);
}
.title-area img.logo-img {
  height: 32px;
  margin-right: 8px;
}

/* Special styling for NodeForum text segmentation */
.title-node {
  color: #000000;
  font-weight: 800;
}
.title-forum {
  color: #9C27B0;
  font-weight: 800;
}

.lang-switcher {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.lang-btn {
  background: #F5F5F5;
  border: 1px solid #D1C4E9;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 8px;
  color: #424242;
  cursor: pointer;
}
.lang-btn.active {
  background: #6A1B9A;
  color: #FFFFFF;
  border-color: #6A1B9A;
}

/* Account Page Styles */
#mobile-account-view .account-header {
    /* display: flex; align-items: center; margin-bottom: 24px; -- styles are inline for now */
}

#mobile-account-view .account-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
}

#mobile-account-view .account-menu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    margin-bottom: 8px !important;
    background: #f5f5f5 !important;
    color: #333 !important;
    border: none !important;
    border-radius: 8px !important;
    text-align: left !important;
    font-size: 1em !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
}

#mobile-account-view .account-menu-item i {
    color: #555; /* Icon color */
    width: 20px; /* Ensure icons align well */
    text-align: center;
}

#mobile-account-view #account-logout-btn {
    /* background-color: #d9534f; -- using .btn-danger from forumstyle.css */
    /* color: white; -- using .btn-danger from forumstyle.css */
    /* width: 100%; margin-top: 24px; padding: 12px; -- styles are inline for now */
    font-size: 1em;
}

/* Settings Page Styles */
#mobile-settings-view .settings-header h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.4em;
    color: #333;
    margin-bottom: 16px; /* Add some space below title */
}

#mobile-settings-view .settings-menu {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Space between setting items */
}

#mobile-settings-view .setting-item {
    display: flex;
    justify-content: space-between; /* Align label and control nicely */
    align-items: center;
    padding: 12px 0; /* Add some padding for each item */
    border-bottom: 1px solid #eee; /* Separator line */
}

#mobile-settings-view .setting-item:last-child {
    border-bottom: none; /* No border for the last item */
}

#mobile-settings-view .setting-item label {
    font-size: 1em;
    color: #444;
}

#mobile-settings-view input[type="checkbox"] {
    transform: scale(1.2); /* Make checkboxes a bit larger */
    cursor: pointer;
}

/* Ensure main container of mobile view takes full height if needed */
.mobile-layout > main {
    flex-grow: 1; /* Allows main to expand */
    overflow-y: auto; /* Allows content within main to scroll if it overflows */
    padding-bottom: 60px; /* To avoid content being hidden by bottom-nav */
}

.mobile-layout {
    display: flex; /* Changed from none/block to flex for full height layout */
    flex-direction: column;
    min-height: 100vh; /* Ensure mobile layout takes at least full viewport height */
}

/* --- FORCE ACCOUNT MENU COLUMN LAYOUT --- */
#mobile-account-view .account-menu {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 8px !important;
}
#mobile-account-view .account-menu-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  margin-bottom: 8px !important;
  background: #f5f5f5 !important;
  color: #333 !important;
  border: none !important;
  border-radius: 8px !important;
  text-align: left !important;
  font-size: 1em !important;
  cursor: pointer !important;
  padding: 12px 16px !important;
}

html, body, input, button, textarea, select,
.topic-card,
.topic-header .topic-title,
.topic-content,
.topic-meta,
.topic-tags,
.tag,
.app-title,
.logo-text,
.categories,
.pill,
.bottom-nav,
.nav-item,
.read-more,
#topics-list,
.topics-list {
    font-family: 'Inter', sans-serif !important;
}

html, body, input, button, textarea, select,
.topic-item, .topic-content, .topic-title, .topic-meta, .topic-tags, .tag, #topics-list, .topics-list,
.topic-card, .topic-header .topic-title
{
    font-family: 'Inter', Arial, sans-serif !important;
}

.topic-title {
    font-size: 1.08rem !important;
}
.topic-content {
    font-size: 0.98rem !important;
}
.topic-meta, .topic-tags, .tag {
    font-size: 0.93rem !important;
}
.topic-detail-title {
    font-size: 1.77rem !important;
}
.topic-detail-body {
    font-size: 1.545rem !important;
}
.topic-detail-meta, .topic-detail-tags, .topic-tag {
    font-size: 0.95rem !important;
}

/* Ensure good Vietnamese font rendering for My Replies page on mobile */
.my-reply-item,
.my-reply-item .topic-title,
.my-reply-item .topic-meta span,
.my-reply-item .my-reply-content-preview,
.my-reply-item .my-reply-context a,
.my-reply-item .my-reply-context small {
    font-family: 'Inter', 'Be Vietnam Pro', Roboto, 'Noto Sans', Arial, sans-serif !important;
}