/* ===========================================================
 * Talkit: Master stylesheet (entrypoint)
 *
 * @layer を用いてカスケード優先度を制御:
 *   reset < base < theme < layout < components < services < utilities
 *
 * theme を base より後 (= 高優先) に置くことで、
 * variables.css の変数定義よりも tokens-(service|dark).css の
 * 上書きが勝つようにしてある。
 *
 * 各レイヤは @import で個別ファイルを取り込む。
 *   - theme      : service accent / dark mode color override
 *   - base       : element 既定 + variables (base の最初)
 *   - layout     : ページ外枠 (header/footer/sidebar/adslot/page grid)
 *   - components  : 再利用可能小コンポーネント
 *   - services   : 各サービス固有の上書き (services/<service>.css)
 *   - utilities  : お守り、原則使わない
 * =========================================================== */

@layer reset, base, theme, layout, components, services, utilities;

/* ---- reset ---- */
@import url("./reset.css") layer(reset);

/* ---- base ---- */
@import url("./variables.css") layer(base);
@import url("./base.css")      layer(base);

/* ---- theme (色 token の上書き, base より後で高優先) ---- */
@import url("./theme/tokens-service.css") layer(theme);
@import url("./theme/tokens-dark.css")    layer(theme);

/* ---- layout ---- */
@import url("./layout/layout.css")  layer(layout);
@import url("./layout/header.css")  layer(layout);
@import url("./layout/footer.css")  layer(layout);
@import url("./layout/sidebar.css") layer(layout);
@import url("./layout/adslot.css")  layer(layout);

/* ---- components ---- */
@import url("./components/buttons.css")        layer(components);
@import url("./components/cards.css")           layer(components);
@import url("./components/forms.css")           layer(components);
@import url("./components/fields.css")          layer(components);
@import url("./components/badges.css")          layer(components);
@import url("./components/avatars.css")         layer(components);
@import url("./components/lists.css")           layer(components);
@import url("./components/pagination.css")      layer(components);
@import url("./components/notices.css")         layer(components);
@import url("./components/modals.css")          layer(components);
@import url("./components/tabs.css")            layer(components);
@import url("./components/empty.css")           layer(components);
@import url("./components/spinner.css")         layer(components);
@import url("./components/announcements.css")   layer(components);
@import url("./components/dropdown.css")        layer(components);
@import url("./components/service-nav.css")     layer(components);
@import url("./components/composer.css")        layer(components);
@import url("./components/post.css")            layer(components);
@import url("./components/thread.css")          layer(components);
@import url("./components/message.css")         layer(components);
@import url("./components/chat.css")            layer(components);
@import url("./components/table.css")           layer(components);

/* ---- services ---- */
@import url("./services.css") layer(services);

/* ---- utilities (原則使わない) ---- */
@layer utilities {
  .u-text-center { text-align: center; }
  .u-text-right  { text-align: right; }
  .u-text-muted  { color: var(--tk-color-text-muted); }
  .u-text-strong { color: var(--tk-color-text-strong); }
  .u-mt-0 { margin-top: 0 !important; }
  .u-mt-2 { margin-top: var(--tk-space-2) !important; }
  .u-mt-4 { margin-top: var(--tk-space-4) !important; }
  .u-mt-6 { margin-top: var(--tk-space-6) !important; }
  .u-mb-0 { margin-bottom: 0 !important; }
  .u-mb-2 { margin-bottom: var(--tk-space-2) !important; }
  .u-mb-4 { margin-bottom: var(--tk-space-4) !important; }
  .u-mb-6 { margin-bottom: var(--tk-space-6) !important; }
  .u-hidden { display: none !important; }
  .u-hidden-sm  { }
  .u-hidden-md { }
  .u-hidden-lg { }
  .u-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
  .u-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .u-no-scrollbar { scrollbar-width: none; }
  .u-no-scrollbar::-webkit-scrollbar { display: none; }
}

@media (max-width: 600px) {
  .u-hidden-sm { display: none !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .u-hidden-md { display: none !important; }
}
@media (min-width: 901px) {
  .u-hidden-lg { display: none !important; }
}