/* ==========================================================
   ATOSY ERP
   RESPONSIVE LIQUID V1
   Tablet + Mobile adaptive layer

   Desktop >1180px:
   Không thay đổi layout hiện tại.
   ========================================================== */


/* ==========================================================
   0. GLOBAL LIQUID FOUNDATION
   ========================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

:root {
  --atosy-fluid-x:
    clamp(12px, 2vw, 28px);

  --atosy-fluid-gap:
    clamp(10px, 1.8vw, 24px);

  --atosy-touch:
    44px;

  --atosy-mobile-safe-bottom:
    env(safe-area-inset-bottom, 0px);

  --atosy-mobile-safe-top:
    env(safe-area-inset-top, 0px);
}


/* ==========================================================
   1. TABLET
   1180px trở xuống
   ========================================================== */

@media (max-width: 1180px) {

  /* ----------------------------------------
     APP HEADER
     ---------------------------------------- */

  .app-header {
    padding-left:
      var(--atosy-fluid-x) !important;

    padding-right:
      var(--atosy-fluid-x) !important;

    gap:
      12px !important;
  }

  .app-header .brand-tagline {
    display:
      none !important;
  }

  .app-header .brand-name {
    white-space:
      nowrap;
  }

  .logout-button {
    min-height:
      var(--atosy-touch);
  }


  /* ----------------------------------------
     GENERAL CONTENT
     ---------------------------------------- */

  .app-main,
  main {
    min-width:
      0;
  }


  /* ----------------------------------------
     SUBJECT MAIN GRID
     Sidebar giảm từ 390px xuống Tablet
     ---------------------------------------- */

  #atosy-subject-grid-v4 {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 32vw)
      !important;

    gap:
      16px !important;
  }


  /* ----------------------------------------
     SUBJECT TOOLBAR
     ---------------------------------------- */

  #subject-full-page
  .subject-full-toolbar {
    flex-wrap:
      wrap !important;

    gap:
      10px !important;
  }

  #subject-full-page
  .subject-full-toolbar
  input[type="search"],
  #subject-full-page
  .subject-full-toolbar
  input {
    min-width:
      min(420px, 100%) !important;
  }


  /* ----------------------------------------
     PROFILE / EDIT DRAWER
     ---------------------------------------- */

  .atosy-subject-detail-v5-drawer {
    width:
      min(
        900px,
        calc(100vw - 32px)
      ) !important;

    max-width:
      calc(100vw - 32px)
      !important;
  }

  .atosy-subject-detail-v5-edit-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }

}


/* ==========================================================
   2. TABLET DỌC
   820px trở xuống
   ========================================================== */

@media (max-width: 820px) {

  /* ----------------------------------------
     HEADER LIQUID
     ---------------------------------------- */

  .app-header {
    min-height:
      auto !important;

    flex-wrap:
      wrap !important;

    align-items:
      center !important;

    padding-top:
      10px !important;

    padding-bottom:
      10px !important;
  }

  .app-brand {
    min-width:
      0;
  }

  .brand-copy {
    min-width:
      0;
  }

  .brand-name {
    font-size:
      18px !important;
  }


  /* ----------------------------------------
     SUBJECT:
     Main + Classification chuyển thành 1 cột
     ---------------------------------------- */

  #atosy-subject-grid-v4 {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap:
      14px !important;
  }

  #atosy-subject-grid-v4
  > * {
    min-width:
      0 !important;
  }

  .subject-classification-head,
  .subject-classification-breadcrumb {
    position:
      static !important;
  }


  /* ----------------------------------------
     SUBJECT TOOLBAR
     ---------------------------------------- */

  #subject-full-page
  .subject-full-toolbar {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(150px, auto)
      !important;

    gap:
      10px !important;

    align-items:
      center !important;
  }

  #subject-full-page
  .subject-full-toolbar
  input {
    width:
      100% !important;

    min-width:
      0 !important;
  }


  /* ----------------------------------------
     TABLE
     Tablet vẫn giữ table nhưng cho scroll
     ---------------------------------------- */

  #subject-full-page
  .subject-table-wrap {
    width:
      100% !important;

    max-width:
      100% !important;

    overflow-x:
      auto !important;

    -webkit-overflow-scrolling:
      touch;
  }

  #subject-full-page
  table.subject-full-table {
    min-width:
      700px !important;
  }


  /* ----------------------------------------
     PROFILE DRAWER
     ---------------------------------------- */

  .atosy-subject-detail-v5-overlay {
    padding:
      12px !important;
  }

  .atosy-subject-detail-v5-drawer {
    width:
      100% !important;

    max-width:
      100% !important;

    max-height:
      calc(
        100dvh - 24px
      ) !important;
  }

  .atosy-subject-detail-v5-topline {
    gap:
      10px !important;
  }

  .atosy-subject-detail-v5-profile {
    grid-template-columns:
      56px
      minmax(0, 1fr)
      !important;

    gap:
      12px !important;
  }

  .atosy-subject-detail-v5-avatar {
    width:
      56px !important;

    height:
      56px !important;
  }

  .atosy-subject-detail-v5-name {
    font-size:
      clamp(
        20px,
        4vw,
        28px
      ) !important;

    overflow-wrap:
      anywhere;
  }

  .atosy-subject-detail-v5-edit-grid {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }

}


/* ==========================================================
   3. MOBILE
   640px trở xuống
   ========================================================== */

@media (max-width: 640px) {

  :root {
    --atosy-fluid-x:
      10px;

    --atosy-fluid-gap:
      10px;
  }


  /* ----------------------------------------
     GLOBAL TOUCH
     ---------------------------------------- */

  button,
  select,
  input:not([type="checkbox"]):not([type="radio"]),
  textarea {
    min-height:
      44px;
  }


  /* ----------------------------------------
     HEADER
     ---------------------------------------- */

  .app-header {
    padding:
      calc(
        8px +
        var(--atosy-mobile-safe-top)
      )
      10px
      8px
      !important;
  }

  .app-header
  .brand-logo {
    transform:
      scale(.88);

    transform-origin:
      left center;
  }

  .app-header
  .brand-name {
    font-size:
      16px !important;
  }

  .app-header
  .logout-button {
    padding-inline:
      10px !important;
  }


  /* ----------------------------------------
     TOP NAV
     Dashboard / SVOA / Learning
     ---------------------------------------- */

  .app-header nav,
  .top-nav,
  .main-nav {
    max-width:
      100%;

    overflow-x:
      auto;

    overscroll-behavior-inline:
      contain;

    scrollbar-width:
      none;

    -webkit-overflow-scrolling:
      touch;
  }

  .app-header nav::-webkit-scrollbar,
  .top-nav::-webkit-scrollbar,
  .main-nav::-webkit-scrollbar {
    display:
      none;
  }


  /* ----------------------------------------
     SUBJECT PAGE
     ---------------------------------------- */

  #subject-full-page {
    width:
      100% !important;

    max-width:
      100% !important;

    padding-left:
      8px !important;

    padding-right:
      8px !important;

    overflow-x:
      hidden !important;
  }


  /* ----------------------------------------
     SUBJECT TOOLBAR
     Search / status / refresh / add
     ---------------------------------------- */

  #subject-full-page
  .subject-full-toolbar {
    display:
      grid !important;

    grid-template-columns:
      1fr
      1fr
      !important;

    width:
      100% !important;

    gap:
      8px !important;

    padding:
      10px !important;
  }

  #subject-full-page
  .subject-full-toolbar
  > * {
    min-width:
      0 !important;
  }

  #subject-full-page
  .subject-full-toolbar
  input {
    grid-column:
      1 / -1;

    width:
      100% !important;

    min-width:
      0 !important;
  }

  #subject-full-page
  .subject-full-toolbar
  select {
    width:
      100% !important;
  }

  #subject-full-page
  .subject-full-toolbar
  button {
    width:
      100% !important;

    min-width:
      0 !important;

    white-space:
      nowrap;
  }


  /* ----------------------------------------
     SUBJECT TITLE
     ---------------------------------------- */

  #subject-full-page
  .subject-full-card {
    width:
      100% !important;

    min-width:
      0 !important;
  }


  /* ----------------------------------------
     TABLE -> MOBILE CARDS
     Không mất dữ liệu 4 cột
     ---------------------------------------- */

  #subject-full-page
  .subject-table-wrap {
    overflow:
      visible !important;
  }

  #subject-full-page
  table.subject-full-table {
    width:
      100% !important;

    min-width:
      0 !important;

    border-collapse:
      separate !important;

    border-spacing:
      0 8px !important;
  }

  #subject-full-page
  table.subject-full-table
  thead {
    display:
      none !important;
  }

  #subject-full-page
  table.subject-full-table
  tbody {
    display:
      grid !important;

    gap:
      9px !important;
  }

  #subject-full-page
  table.subject-full-table
  tbody
  tr {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      !important;

    width:
      100% !important;

    min-width:
      0 !important;

    padding:
      12px !important;

    border:
      1px solid
      rgba(
        122,
        165,
        220,
        .20
      ) !important;

    border-radius:
      16px !important;

    background:
      rgba(
        255,
        255,
        255,
        .86
      ) !important;

    gap:
      10px 12px !important;
  }

  #subject-full-page
  table.subject-full-table
  tbody
  td {
    display:
      block !important;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    padding:
      0 !important;

    border:
      0 !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;

    white-space:
      nowrap !important;
  }

  #subject-full-page
  table.subject-full-table
  tbody
  td::before {
    display:
      block;

    margin-bottom:
      3px;

    color:
      #8193ab;

    font-size:
      10px;

    font-weight:
      800;

    letter-spacing:
      .06em;

    text-transform:
      uppercase;
  }

  #subject-full-page
  table.subject-full-table
  tbody
  td:nth-child(1)::before {
    content:
      "Mã Chủ thể";
  }

  #subject-full-page
  table.subject-full-table
  tbody
  td:nth-child(2)::before {
    content:
      "Tên Chủ thể";
  }

  #subject-full-page
  table.subject-full-table
  tbody
  td:nth-child(3)::before {
    content:
      "Cấp độ";
  }

  #subject-full-page
  table.subject-full-table
  tbody
  td:nth-child(4)::before {
    content:
      "Trạng thái";
  }

  #subject-full-page
  table.subject-full-table
  .subject-code {
    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;
  }

  #subject-full-page
  table.subject-full-table
  .subject-name {
    font-size:
      14px !important;

    font-weight:
      750;
  }


  /* ----------------------------------------
     CLASSIFICATION PANEL
     ---------------------------------------- */

  .subject-classification-head {
    border-radius:
      16px !important;
  }

  .subject-tree-scroll {
    max-height:
      55dvh !important;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  /* ----------------------------------------
     SUBJECT PROFILE / EDIT / CREATE
     Full-screen liquid sheet
     ---------------------------------------- */

  .atosy-subject-detail-v5-overlay {
    align-items:
      stretch !important;

    justify-content:
      stretch !important;

    padding:
      0 !important;
  }

  .atosy-subject-detail-v5-drawer {
    width:
      100vw !important;

    max-width:
      100vw !important;

    height:
      100dvh !important;

    max-height:
      100dvh !important;

    margin:
      0 !important;

    border-radius:
      0 !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    -webkit-overflow-scrolling:
      touch;
  }

  .atosy-subject-detail-v5-hero {
    position:
      sticky !important;

    top:
      0;

    z-index:
      20;

    padding:
      calc(
        14px +
        var(--atosy-mobile-safe-top)
      )
      14px
      14px
      !important;
  }

  .atosy-subject-detail-v5-topline {
    display:
      flex !important;

    align-items:
      center !important;

    gap:
      8px !important;
  }

  .atosy-subject-detail-v5-eyebrow {
    min-width:
      0;

    font-size:
      10px !important;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }

  .atosy-subject-detail-v5-actions {
    margin-left:
      auto;

    flex:
      0 0 auto;

    gap:
      6px !important;
  }

  .atosy-subject-detail-v5-edit-btn,
  .atosy-subject-detail-v5-save-btn,
  .atosy-subject-detail-v5-cancel-btn {
    min-height:
      42px !important;

    padding-inline:
      11px !important;
  }

  .atosy-subject-detail-v5-close {
    width:
      42px !important;

    min-width:
      42px !important;

    height:
      42px !important;
  }

  .atosy-subject-detail-v5-profile {
    margin-top:
      12px !important;

    grid-template-columns:
      48px
      minmax(0, 1fr)
      !important;

    gap:
      10px !important;
  }

  .atosy-subject-detail-v5-avatar {
    width:
      48px !important;

    height:
      48px !important;
  }

  .atosy-subject-detail-v5-name {
    font-size:
      21px !important;

    line-height:
      1.15 !important;

    overflow-wrap:
      anywhere;
  }

  .atosy-subject-detail-v5-meta {
    display:
      flex !important;

    flex-wrap:
      wrap !important;

    gap:
      6px !important;
  }

  .atosy-subject-detail-v5-edit-body {
    padding:
      12px
      10px
      calc(
        20px +
        var(--atosy-mobile-safe-bottom)
      )
      !important;
  }

  .atosy-subject-detail-v5-edit-section {
    border-radius:
      16px !important;
  }

  .atosy-subject-detail-v5-edit-section-head {
    padding:
      12px 12px 12px 52px
      !important;
  }

  .atosy-subject-detail-v5-edit-grid {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap:
      10px !important;
  }

  .atosy-subject-detail-v5-edit-field,
  .atosy-note-full-width {
    width:
      100% !important;

    min-width:
      0 !important;

    grid-column:
      1 / -1 !important;
  }

  .atosy-subject-detail-v5-edit-field
  input,
  .atosy-subject-detail-v5-edit-field
  select,
  .atosy-subject-detail-v5-edit-field
  textarea {
    width:
      100% !important;

    min-width:
      0 !important;

    font-size:
      16px !important;
  }


  /* ----------------------------------------
     LOGIN
     ---------------------------------------- */

  .login-view {
    padding:
      16px
      12px
      calc(
        16px +
        var(--atosy-mobile-safe-bottom)
      )
      !important;
  }

  .login-card {
    width:
      min(
        100%,
        460px
      ) !important;

    padding:
      22px 18px !important;

    border-radius:
      24px !important;
  }

}


/* ==========================================================
   4. MOBILE NHỎ
   <= 430px
   ========================================================== */

@media (max-width: 430px) {

  .brand-copy {
    display:
      none !important;
  }

  #subject-full-page
  .subject-full-toolbar {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }

  #subject-full-page
  .subject-full-toolbar
  input,
  #subject-full-page
  .subject-full-toolbar
  select,
  #subject-full-page
  .subject-full-toolbar
  button {
    grid-column:
      1 !important;
  }

  #subject-full-page
  table.subject-full-table
  tbody
  tr {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }

  .atosy-subject-detail-v5-actions {
    gap:
      4px !important;
  }

  .atosy-subject-detail-v5-edit-btn,
  .atosy-subject-detail-v5-save-btn,
  .atosy-subject-detail-v5-cancel-btn {
    padding-inline:
      9px !important;

    font-size:
      11px !important;
  }

}


/* ==========================================================
   5. LANDSCAPE MOBILE
   ========================================================== */

@media
(max-width: 900px)
and (orientation: landscape)
and (max-height: 520px) {

  .atosy-subject-detail-v5-drawer {
    height:
      100dvh !important;

    max-height:
      100dvh !important;
  }

  .atosy-subject-detail-v5-profile {
    margin-top:
      6px !important;
  }

}


/* ==========================================================
   6. ACCESSIBILITY / MOTION
   ========================================================== */

@media
(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}