/* ==========================================================
   ATOSY ERP
   LIQUID BLUE DESIGN SYSTEM
   ========================================================== */

:root {

  --blue-950: #03295f;
  --blue-900: #073b82;
  --blue-850: #084797;
  --blue-800: #0b56b5;
  --blue-700: #1474e8;
  --blue-600: #2487ff;

  --surface:
    rgba(247, 250, 255, 0.97);

  --surface-soft:
    rgba(237, 243, 251, 0.96);

  --surface-blue:
    rgba(255, 255, 255, 0.10);

  --text-dark:
    #12345f;

  --text-blue:
    #0b3d91;

  --text-muted:
    #667995;

  --white:
    #ffffff;

  --green:
    #13a116;

  --green-dark:
    #087a0e;

  --orange:
    #f6a400;

  --red:
    #ed3b44;

  --border:
    rgba(11, 61, 145, 0.10);

  --glass-border:
    rgba(255, 255, 255, 0.18);

  --shadow-card:
    0 8px 0 rgba(3, 31, 69, 0.28),
    0 18px 34px rgba(0, 0, 0, 0.15);

  --shadow-liquid:
    0 8px 0 rgba(3, 31, 69, 0.42),
    0 16px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);

  --radius-card:
    28px;

  --radius-small:
    18px;

  --radius-pill:
    999px;
}


/* ==========================================================
   RESET
   ========================================================== */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;

  min-height: 100%;

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

  background:
    #073b82;

  color:
    white;
}


body {
  min-height: 100vh;

  overflow-x: hidden;
}


button,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


.hidden {
  display: none !important;
}


/* ==========================================================
   BACKGROUND
   ========================================================== */

.app-background {
  position: fixed;

  inset: 0;

  z-index: -10;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(33, 139, 255, 0.95),
      transparent 38%
    ),
    radial-gradient(
      circle at 15% 85%,
      rgba(4, 48, 112, 0.95),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #052b62 0%,
      #0754b8 55%,
      #1887ef 100%
    );
}


.app-background::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.035),
      transparent 35%,
      rgba(255,255,255,0.04)
    );

  pointer-events: none;
}


.app-orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(80px);

  opacity: 0.24;
}


.orb-1 {
  width: 420px;
  height: 420px;

  top: -120px;
  right: 8%;

  background: #54c8ff;
}


.orb-2 {
  width: 360px;
  height: 360px;

  bottom: -160px;
  left: 5%;

  background: #774aff;
}


.orb-3 {
  width: 260px;
  height: 260px;

  top: 45%;
  right: 30%;

  background: #20a3ff;
}


/* ==========================================================
   LOGIN
   ========================================================== */

.login-view {
  min-height: 100vh;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 30px;
}


.login-card {
  width: min(440px, 100%);

  padding: 34px;

  border-radius: 32px;

  color: var(--text-dark);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.98),
      rgba(237,243,251,0.97)
    );

  border:
    1px solid rgba(255,255,255,0.92);

  box-shadow:
    0 12px 0 rgba(3,31,69,0.30),
    0 30px 65px rgba(0,0,0,0.30),
    inset 0 1px 0 #fff;

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}


.login-brand,
.app-brand {
  display: flex;

  align-items: center;

  gap: 13px;
}


.brand-logo {
  position: relative;

  width: 54px;
  height: 54px;

  flex: 0 0 auto;

  border-radius: 16px;

  background: white;

  box-shadow:
    0 7px 15px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.95);
}


.brand-logo.small {
  width: 46px;
  height: 46px;

  border-radius: 14px;
}


.brand-logo span,
.brand-logo i {
  position: absolute;

  display: block;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #263cff,
      #3814d8
    );

  transform:
    rotate(32deg);
}


.brand-logo span {
  width: 15px;
  height: 34px;

  top: 9px;
  left: 17px;
}


.brand-logo i {
  width: 11px;
  height: 11px;

  right: 8px;
  bottom: 8px;
}


.login-brand h1 {
  margin: 0;

  color:
    var(--text-blue);

  font-size:
    22px;

  font-weight:
    900;
}


.login-brand p {
  margin:
    3px 0 0;

  color:
    var(--text-muted);

  font-size:
    12px;
}


.login-heading {
  margin-top:
    34px;
}


.login-heading h2 {
  margin:
    0;

  color:
    var(--text-blue);

  font-size:
    27px;

  letter-spacing:
    -0.5px;
}


.login-heading p {
  margin:
    10px 0 0;

  color:
    var(--text-muted);

  line-height:
    1.55;

  font-size:
    13px;
}


.login-form {
  margin-top:
    26px;
}


.form-field {
  display: block;

  margin-bottom:
    16px;
}


.form-field > span {
  display: block;

  margin:
    0 0 7px 4px;

  color:
    #46617f;

  font-size:
    12px;

  font-weight:
    800;
}


.form-field input {
  width: 100%;

  min-height:
    50px;

  padding:
    0 16px;

  border:
    1px solid rgba(11,61,145,0.12);

  border-radius:
    16px;

  outline: none;

  color:
    var(--text-dark);

  background:
    rgba(228,236,247,0.76);

  box-shadow:
    inset 0 2px 5px rgba(15,54,105,0.05);

  transition:
    .2s ease;
}


.form-field input:focus {
  border-color:
    rgba(33,120,255,0.72);

  background:
    white;

  box-shadow:
    0 0 0 4px rgba(33,120,255,0.12);
}


.primary-button,
.secondary-button {
  appearance: none;

  border:
    none;

  border-radius:
    var(--radius-pill);

  font-weight:
    850;
}


.primary-button {
  color: white;

  background:
    linear-gradient(
      180deg,
      #1783ff,
      #0866dd
    );

  box-shadow:
    0 5px 0 #064ea9,
    0 8px 18px rgba(0,80,190,0.26);
}


.login-button {
  width: 100%;

  min-height:
    48px;

  margin-top:
    3px;
}


.login-button:active {
  transform:
    translateY(3px);

  box-shadow:
    0 2px 0 #064ea9;
}


.login-error {
  min-height:
    18px;

  margin:
    6px 3px;

  color:
    #c83232;

  font-size:
    12px;

  font-weight:
    700;
}


.login-footer {
  margin-top:
    24px;

  text-align:
    center;

  color:
    #8696aa;

  font-size:
    11px;
}


/* ==========================================================
   APP HEADER
   ========================================================== */

.app-header {
  position: sticky;

  top: 0;

  z-index: 3000;

  min-height:
    92px;

  padding:
    0 4%;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap:
    20px;

  background:
    linear-gradient(
      180deg,
      rgba(5,51,113,0.86),
      rgba(5,54,119,0.72)
    );

  border-bottom:
    1px solid rgba(255,255,255,0.13);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);

  box-shadow:
    0 8px 24px rgba(0,0,0,0.08);
}


.brand-copy {
  line-height:
    1.1;
}


.brand-name {
  font-size:
    19px;

  font-weight:
    900;
}


.brand-tagline {
  margin-top:
    5px;

  color:
    rgba(255,255,255,0.66);

  font-size:
    10px;
}


.top-navigation {
  display: flex;

  align-items: center;

  gap: 4px;

  padding:
    6px;

  border:
    1px solid rgba(255,255,255,0.16);

  border-radius:
    999px;

  background:
    rgba(3,45,105,0.34);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08);
}


.top-nav-item {
  min-height:
    42px;

  padding:
    0 19px;

  border:
    none;

  border-radius:
    999px;

  color:
    rgba(255,255,255,0.88);

  background:
    transparent;

  font-size:
    12px;

  font-weight:
    780;
}


.top-nav-item.active {
  color:
    white;

  background:
    linear-gradient(
      180deg,
      rgba(44,137,255,0.98),
      rgba(17,102,218,0.98)
    );

  box-shadow:
    0 4px 0 rgba(3,44,103,0.55),
    inset 0 1px 0 rgba(255,255,255,0.20);
}


.nav-icon {
  margin-right:
    6px;
}


.header-right {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap:
    13px;
}


.user-pill {
  min-height:
    44px;

  padding:
    6px 15px 6px 8px;

  display: flex;

  align-items: center;

  gap:
    9px;

  border:
    1px solid rgba(255,255,255,0.20);

  border-radius:
    999px;

  background:
    rgba(4,53,119,0.42);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10);
}


.user-avatar {
  width:
    31px;

  height:
    31px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius:
    50%;

  color:
    #78b9ff;

  background:
    rgba(20,113,239,0.32);
}


.user-name {
  max-width:
    150px;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  font-weight:
    850;
}


.user-role {
  margin-top:
    2px;

  color:
    rgba(255,255,255,0.58);

  font-size:
    9px;
}


.logout-button {
  border:
    none;

  color:
    rgba(255,255,255,0.90);

  background:
    transparent;

  font-size:
    12px;

  font-weight:
    800;

  text-decoration:
    underline;
}


/* ==========================================================
   MAIN
   ========================================================== */

.app-main {
  width:
    min(1520px, calc(100% - 70px));

  margin:
    0 auto;

  padding:
    30px 0 24px;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero-section {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap:
    24px;

  padding:
    0 10px 22px;
}


.hero-section h1 {
  margin:
    0;

  font-size:
    clamp(26px, 2.7vw, 38px);

  letter-spacing:
    -1px;

  font-weight:
    900;
}


.hero-section p {
  margin:
    8px 0 0;

  color:
    rgba(255,255,255,0.70);

  font-size:
    13px;
}


.hero-actions {
  display: flex;

  align-items: center;

  gap:
    12px;
}


.global-search {
  min-width:
    340px;

  height:
    48px;

  display: flex;

  align-items: center;

  gap:
    10px;

  padding:
    0 16px;

  border:
    1px solid rgba(255,255,255,0.24);

  border-radius:
    18px;

  background:
    rgba(11,72,158,0.40);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08);
}


.search-icon {
  color:
    #b8daff;

  font-size:
    20px;
}


.global-search input {
  width:
    100%;

  border:
    none;

  outline:
    none;

  color:
    white;

  background:
    transparent;

  font-size:
    12px;
}


.global-search input::placeholder {
  color:
    rgba(255,255,255,0.54);
}


.notification-button {
  position:
    relative;

  width:
    48px;

  height:
    48px;

  border:
    1px solid rgba(255,255,255,0.22);

  border-radius:
    16px;

  color:
    white;

  background:
    rgba(10,74,161,0.45);

  font-size:
    19px;
}


.notification-dot {
  position:
    absolute;

  top:
    8px;

  right:
    8px;

  width:
    8px;

  height:
    8px;

  border:
    2px solid #0b56b5;

  border-radius:
    50%;

  background:
    #ff355d;
}


/* ==========================================================
   FILTER
   ========================================================== */

.module-filter-shell {
  min-height:
    70px;

  padding:
    9px 16px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap:
    16px;

  border:
    1px solid rgba(255,255,255,0.17);

  border-radius:
    50px;

  background:
    linear-gradient(
      135deg,
      rgba(18,85,179,0.78),
      rgba(5,53,120,0.82)
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    var(--shadow-liquid);
}


.module-filter {
  display: flex;

  align-items: center;

  gap:
    8px;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.module-filter::-webkit-scrollbar {
  display: none;
}


.filter-chip {
  flex-shrink:
    0;

  min-height:
    40px;

  padding:
    0 20px;

  border:
    1px solid rgba(255,255,255,0.28);

  border-radius:
    999px;

  color:
    rgba(255,255,255,0.92);

  background:
    rgba(255,255,255,0.07);

  font-size:
    12px;

  font-weight:
    800;

  transition:
    .18s ease;
}


.filter-chip:hover {
  background:
    rgba(255,255,255,0.14);
}


.filter-chip.active {
  color:
    #123967;

  background:
    rgba(255,255,255,0.94);

  border-color:
    white;

  box-shadow:
    0 4px 0 rgba(3,31,69,0.28),
    0 8px 16px rgba(0,0,0,0.12);

  transform:
    translateY(-1px);
}


.filter-meta {
  flex-shrink:
    0;

  display: flex;

  gap:
    8px;

  padding:
    0 10px;

  color:
    rgba(255,255,255,0.55);

  font-size:
    10px;
}


.filter-meta strong {
  color:
    rgba(255,255,255,0.90);
}


/* ==========================================================
   MODULE GRID
   ========================================================== */

.module-grid {
  margin-top:
    28px;

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    24px;
}


.module-card {
  min-height:
    225px;

  padding:
    22px;

  display: flex;

  flex-direction: column;

  border:
    1px solid rgba(255,255,255,0.93);

  border-radius:
    var(--radius-card);

  color:
    var(--text-dark);

  background:
    linear-gradient(
      180deg,
      #f8faff 0%,
      #edf3fa 100%
    );

  box-shadow:
    var(--shadow-card);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.module-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 10px 0 rgba(3,31,69,0.25),
    0 24px 40px rgba(0,0,0,0.18);
}


.module-top {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    16px;
}


.module-icon {
  width:
    60px;

  height:
    60px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    17px;

  font-size:
    27px;

  font-weight:
    900;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86);
}


.subject-icon {
  color:
    #0b63df;

  background:
    linear-gradient(
      180deg,
      #e3eeff,
      #d4e5ff
    );
}


.verb-icon {
  color:
    #0b9e46;

  background:
    linear-gradient(
      180deg,
      #e2f8ea,
      #d6f0e1
    );
}


.object-icon {
  color:
    #ee9700;

  background:
    linear-gradient(
      180deg,
      #fff1d9,
      #ffe7c5
    );
}


.adverb-icon {
  color:
    #784ff1;

  background:
    linear-gradient(
      180deg,
      #ede6ff,
      #e0d6ff
    );
}


.security-icon {
  color:
    white;

  background:
    linear-gradient(
      180deg,
      #ff6064,
      #dc2734
    );
}


.database-icon {
  color:
    #1172eb;

  background:
    linear-gradient(
      180deg,
      #e1efff,
      #d0e5ff
    );
}


.module-heading {
  flex:
    1;

  min-width:
    0;
}


.module-heading h2 {
  margin:
    3px 0 5px;

  color:
    var(--text-blue);

  font-size:
    20px;

  font-weight:
    900;

  letter-spacing:
    -0.3px;
}


.module-heading h2 span {
  font-size:
    16px;
}


.module-heading p {
  margin:
    0;

  min-height:
    42px;

  color:
    #4e6786;

  font-size:
    12px;

  line-height:
    1.45;
}


.card-menu {
  padding:
    0;

  border:
    none;

  color:
    #164b99;

  background:
    transparent;

  font-weight:
    900;
}


.module-tags {
  margin:
    15px 0 16px 76px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.module-tags span {
  padding:
    5px 10px;

  border:
    1px solid rgba(11,61,145,0.11);

  border-radius:
    999px;

  color:
    #16458e;

  background:
    rgba(11,90,205,0.06);

  font-size:
    10px;

  font-weight:
    800;
}


.module-bottom {
  margin-top:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;
}


.module-stat {
  min-width:
    170px;

  padding:
    7px 16px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  border:
    1px solid rgba(11,61,145,0.08);

  border-radius:
    999px;

  background:
    rgba(255,255,255,0.83);

  box-shadow:
    inset 0 1px 0 white,
    0 2px 6px rgba(4,47,104,0.06);
}


.module-stat span {
  color:
    #5d718c;

  font-size:
    10px;

  font-weight:
    700;
}


.module-stat strong {
  margin-left:
    auto;

  color:
    #153f78;

  font-size:
    18px;
}


.module-action {
  min-width:
    128px;

  min-height:
    43px;

  padding:
    0 18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  border:
    none;

  border-radius:
    999px;

  color:
    white;

  font-size:
    12px;

  font-weight:
    850;

  transition:
    .14s ease;
}


.module-action span {
  font-size:
    21px;

  line-height:
    0;
}


.module-action.green {
  background:
    linear-gradient(
      180deg,
      #17b51d,
      #078b0d
    );

  box-shadow:
    0 5px 0 #076b0b,
    0 8px 15px rgba(0,120,16,0.15);
}


.module-action.blue {
  background:
    linear-gradient(
      180deg,
      #218dff,
      #0869e5
    );

  box-shadow:
    0 5px 0 #0751b5,
    0 8px 15px rgba(0,82,190,0.15);
}


.module-action.outline {
  color:
    #116be5;

  border:
    1px solid rgba(24,116,238,0.29);

  background:
    rgba(232,242,255,0.90);

  box-shadow:
    0 3px 0 rgba(11,75,165,0.12);
}


.module-action:active {
  transform:
    translateY(3px);
}


.security-status {
  min-width:
    190px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    #26714b;

  font-size:
    11px;

  font-weight:
    800;
}


.status-dot {
  width:
    26px;

  height:
    26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  color:
    white;

  background:
    #11a15c;
}


.database-status {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.live-dot {
  width:
    12px;

  height:
    12px;

  border-radius:
    50%;

  background:
    #16bb68;

  box-shadow:
    0 0 0 5px rgba(22,187,104,0.12);
}


.database-status span {
  display:
    block;

  color:
    #73849a;

  font-size:
    9px;
}


.database-status strong {
  color:
    #216a48;

  font-size:
    12px;
}


/* ==========================================================
   SUMMARY
   ========================================================== */

.summary-bar {
  margin-top:
    28px;

  min-height:
    102px;

  padding:
    17px 25px;

  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  border:
    1px solid rgba(255,255,255,0.18);

  border-radius:
    28px;

  background:
    linear-gradient(
      135deg,
      rgba(18,91,190,0.58),
      rgba(7,65,145,0.68)
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    var(--shadow-liquid);
}


.summary-item {
  flex:
    1;

  min-width:
    150px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.summary-icon {
  width:
    52px;

  height:
    52px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    17px;

  color:
    white;

  background:
    rgba(70,147,255,0.37);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14);
}


.summary-item strong {
  display:
    block;

  font-size:
    19px;
}


.summary-item span {
  display:
    block;

  margin-top:
    3px;

  color:
    rgba(255,255,255,0.65);

  font-size:
    10px;
}


.summary-divider {
  width:
    1px;

  height:
    48px;

  background:
    rgba(255,255,255,0.20);
}


.summary-quote {
  max-width:
    220px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    rgba(255,255,255,0.85);

  font-size:
    11px;

  line-height:
    1.5;
}


.summary-quote span {
  width:
    8px;

  height:
    8px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    #23d7ff;

  box-shadow:
    0 0 15px #23d7ff;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.app-footer {
  padding:
    28px 5px 5px;

  display:
    flex;

  justify-content:
    space-between;

  color:
    rgba(255,255,255,0.65);

  font-size:
    10px;
}


.app-footer div {
  display:
    flex;

  gap:
    18px;
}


.app-footer a {
  color:
    rgba(255,255,255,0.72);

  text-decoration:
    none;
}


/* ==========================================================
   MODAL
   ========================================================== */

.modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    5000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    35px;
}


.modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(2,22,50,0.60);

  backdrop-filter:
    blur(11px);

  -webkit-backdrop-filter:
    blur(11px);
}


.modal-panel {
  position:
    relative;

  z-index:
    1;

  width:
    min(1320px, 100%);

  max-height:
    calc(100vh - 70px);

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid rgba(255,255,255,0.92);

  border-radius:
    30px;

  color:
    var(--text-dark);

  background:
    linear-gradient(
      180deg,
      rgba(250,252,255,0.99),
      rgba(237,243,251,0.99)
    );

  box-shadow:
    0 15px 0 rgba(3,31,69,0.28),
    0 40px 80px rgba(0,0,0,0.40);
}


.modal-header {
  padding:
    22px 26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid rgba(11,61,145,0.08);
}


.modal-eyebrow {
  color:
    #71849c;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    1.2px;
}


.modal-header h2 {
  margin:
    5px 0 0;

  color:
    var(--text-blue);

  font-size:
    25px;
}


.modal-close {
  width:
    41px;

  height:
    41px;

  border:
    none;

  border-radius:
    50%;

  color:
    #164675;

  background:
    #e5edf7;

  font-size:
    23px;
}


.modal-toolbar {
  padding:
    14px 25px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    15px;
}


.modal-search {
  width:
    min(430px, 100%);

  min-height:
    43px;

  padding:
    0 14px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid rgba(11,61,145,0.09);

  border-radius:
    16px;

  background:
    rgba(226,234,245,0.72);
}


.modal-search input {
  width:
    100%;

  border:
    none;

  outline:
    none;

  background:
    transparent;

  color:
    #183c67;
}


.modal-count {
  color:
    #60738c;

  font-size:
    11px;

  font-weight:
    750;
}


.modal-loading {
  padding:
    70px;

  text-align:
    center;

  color:
    #70839b;

  font-weight:
    800;
}


.table-wrapper {
  overflow:
    auto;

  margin:
    0 22px;

  border:
    1px solid rgba(11,61,145,0.07);

  border-radius:
    18px;

  background:
    white;
}


.data-table {
  width:
    100%;

  border-collapse:
    collapse;

  white-space:
    nowrap;
}


.data-table th {
  position:
    sticky;

  top:
    0;

  z-index:
    2;

  padding:
    13px 16px;

  text-align:
    left;

  color:
    #54708f;

  background:
    #edf3fa;

  font-size:
    10px;

  font-weight:
    850;

  border-bottom:
    1px solid rgba(11,61,145,0.08);
}


.data-table td {
  max-width:
    330px;

  padding:
    12px 16px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  color:
    #29496d;

  font-size:
    11px;

  border-bottom:
    1px solid rgba(11,61,145,0.05);
}


.data-table tr:hover td {
  background:
    #f7faff;
}


.modal-footer {
  padding:
    15px 24px 21px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  color:
    #70829a;

  font-size:
    10px;
}


.secondary-button {
  min-height:
    38px;

  padding:
    0 20px;

  color:
    #1557a3;

  background:
    #e1ecf9;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {

  .module-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .app-header {
    grid-template-columns:
      1fr auto;
  }


  .top-navigation {
    display:
      none;
  }

}


@media (max-width: 800px) {

  .app-header {
    min-height:
      75px;

    padding:
      0 14px;
  }


  .brand-tagline,
  .user-role {
    display:
      none;
  }


  .user-pill {
    padding-right:
      9px;
  }


  .logout-button {
    display:
      none;
  }


  .app-main {
    width:
      calc(100% - 22px);

    padding-top:
      19px;
  }


  .hero-section {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .hero-actions {
    width:
      100%;
  }


  .global-search {
    min-width:
      0;

    flex:
      1;
  }


  .module-filter-shell {
    align-items:
      flex-start;

    flex-direction:
      column;

    border-radius:
      24px;
  }


  .filter-meta {
    display:
      none;
  }


  .module-grid {
    grid-template-columns:
      1fr;
  }


  .module-card {
    min-height:
      0;
  }


  .summary-bar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .summary-divider {
    width:
      100%;

    height:
      1px;
  }


  .summary-quote {
    max-width:
      none;
  }


  .app-footer {
    gap:
      18px;

    flex-direction:
      column;
  }


  .modal {
    padding:
      10px;
  }


  .modal-panel {
    max-height:
      calc(100vh - 20px);

    border-radius:
      22px;
  }

}


@media (max-width: 520px) {

  .brand-copy {
    display:
      none;
  }


  .user-name {
    max-width:
      95px;
  }


  .hero-section h1 {
    font-size:
      27px;
  }


  .module-card {
    padding:
      17px;

    border-radius:
      23px;
  }


  .module-icon {
    width:
      49px;

    height:
      49px;

    font-size:
      22px;
  }


  .module-heading h2 {
    font-size:
      17px;
  }


  .module-tags {
    margin-left:
      0;
  }


  .module-bottom {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .module-action,
  .module-stat {
    width:
      100%;
  }


  .module-action {
    min-height:
      43px;
  }

}





/* ==========================================================
   ATOSY ERP
   SUBJECT FULL PAGE
   Append toàn bộ block này xuống CUỐI styles.css
   ========================================================== */


/* ==========================================================
   PAGE
   ========================================================== */

.subject-full-page {
  width: 100%;
}


/* ==========================================================
   HERO
   ========================================================== */

.subject-full-hero {
  min-height: 145px;

  padding: 27px 31px;

  display: flex;

  align-items: center;

  gap: 21px;

  border:
    1px solid
    rgba(255, 255, 255, 0.17);

  border-radius:
    30px;

  background:
    linear-gradient(
      135deg,
      rgba(17, 90, 192, 0.72),
      rgba(6, 61, 138, 0.78)
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    var(--shadow-liquid);
}


.subject-full-back {
  width: 52px;

  height: 52px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  border-radius:
    17px;

  color:
    white;

  background:
    rgba(255, 255, 255, 0.09);

  font-size:
    32px;

  font-weight:
    500;

  line-height:
    1;

  transition:
    .15s ease;
}


.subject-full-back:hover {
  background:
    rgba(255, 255, 255, 0.16);

  transform:
    translateX(-2px);
}


.subject-full-hero-copy {
  flex: 1;

  min-width: 0;
}


.subject-full-eyebrow {
  margin-bottom: 5px;

  color:
    rgba(255, 255, 255, 0.58);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    1.2px;
}


.subject-full-hero h1 {
  margin: 0;

  color:
    white;

  font-size:
    32px;

  font-weight:
    900;

  letter-spacing:
    -0.7px;
}


.subject-full-hero h1 span {
  margin-left: 7px;

  color:
    rgba(255, 255, 255, 0.62);

  font-size:
    19px;

  font-weight:
    800;
}


.subject-full-hero p {
  margin:
    7px 0 0;

  color:
    rgba(255, 255, 255, 0.67);

  font-size:
    12px;

  line-height:
    1.45;
}


.subject-full-total {
  min-width:
    148px;

  padding:
    13px 18px;

  text-align:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.17);

  border-radius:
    20px;

  background:
    rgba(255, 255, 255, 0.08);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.07);
}


.subject-full-total span {
  display:
    block;

  color:
    rgba(255, 255, 255, 0.58);

  font-size:
    9px;

  font-weight:
    800;
}


.subject-full-total strong {
  display:
    block;

  margin-top:
    4px;

  color:
    white;

  font-size:
    25px;

  font-weight:
    900;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.subject-full-toolbar {
  margin:
    24px 0 20px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.subject-full-search {
  flex: 1;

  min-width: 260px;

  min-height:
    50px;

  padding:
    0 16px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.20);

  border-radius:
    18px;

  background:
    rgba(7, 62, 140, 0.52);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.07);
}


.subject-full-search span {
  color:
    #b8dcff;

  font-size:
    20px;
}


.subject-full-search input {
  width:
    100%;

  min-width: 0;

  border:
    none;

  outline:
    none;

  color:
    white;

  background:
    transparent;

  font-size:
    12px;
}


.subject-full-search input::placeholder {
  color:
    rgba(255, 255, 255, 0.53);
}


.subject-full-select {
  min-width:
    185px;

  min-height:
    50px;

  padding:
    0 16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.20);

  border-radius:
    17px;

  outline:
    none;

  color:
    white;

  background:
    #0b58b6;

  font-size:
    11px;

  font-weight:
    800;
}


.subject-full-select option {
  color:
    #183d69;

  background:
    white;
}


.subject-full-refresh,
.subject-full-add {
  min-height:
    50px;

  padding:
    0 20px;

  border-radius:
    17px;

  font-size:
    11px;

  font-weight:
    850;

  white-space:
    nowrap;

  transition:
    .15s ease;
}


.subject-full-refresh {
  color:
    white;

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  background:
    rgba(255, 255, 255, 0.09);
}


.subject-full-refresh:hover {
  background:
    rgba(255, 255, 255, 0.15);
}


.subject-full-add {
  border:
    none;

  color:
    white;

  background:
    linear-gradient(
      180deg,
      #18b81f,
      #078b0d
    );

  box-shadow:
    0 5px 0
    #076b0b,
    0 8px 16px
    rgba(0, 100, 20, 0.15);
}


.subject-full-add:active {
  transform:
    translateY(3px);

  box-shadow:
    0 2px 0
    #076b0b;
}


/* ==========================================================
   TABLE CARD
   ========================================================== */

.subject-full-card {
  overflow:
    hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.95);

  border-radius:
    28px;

  color:
    var(--text-dark);

  background:
    linear-gradient(
      180deg,
      #f9fbff 0%,
      #edf3fa 100%
    );

  box-shadow:
    var(--shadow-card);
}


.subject-full-card-header {
  min-height:
    76px;

  padding:
    17px 24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid
    rgba(11, 61, 145, 0.08);
}


.subject-full-card-header strong {
  display:
    block;

  color:
    var(--text-blue);

  font-size:
    16px;

  font-weight:
    900;
}


.subject-full-card-header span {
  display:
    block;

  margin-top:
    4px;

  color:
    #70829b;

  font-size:
    10px;
}


.subject-full-page-size {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.subject-full-page-size > span {
  margin:
    0;

  color:
    #71839a;

  font-size:
    10px;
}


.subject-full-page-size select {
  min-height:
    35px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(11, 61, 145, 0.10);

  border-radius:
    11px;

  outline:
    none;

  color:
    #164675;

  background:
    white;

  font-weight:
    800;
}


/* ==========================================================
   LOADING
   ========================================================== */

.subject-full-loading {
  min-height:
    250px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;

  color:
    #70839b;

  font-size:
    11px;

  font-weight:
    800;
}


.subject-full-spinner {
  width:
    34px;

  height:
    34px;

  border:
    4px solid
    #d7e3f1;

  border-top-color:
    #1675e8;

  border-radius:
    50%;

  animation:
    subjectFullSpin
    .8s linear infinite;
}


@keyframes subjectFullSpin {

  to {

    transform:
      rotate(360deg);

  }

}


/* ==========================================================
   TABLE
   ========================================================== */

.subject-full-table-wrapper {
  width:
    100%;

  overflow:
    auto;
}


.subject-full-table {
  width:
    100%;

  border-collapse:
    collapse;

  white-space:
    nowrap;
}


.subject-full-table th {
  padding:
    13px 18px;

  text-align:
    left;

  color:
    #69809a;

  background:
    #eaf1f9;

  border-bottom:
    1px solid
    rgba(11, 61, 145, 0.08);

  font-size:
    9px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    .4px;
}


.subject-full-table td {
  max-width:
    280px;

  padding:
    14px 18px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  color:
    #365674;

  border-bottom:
    1px solid
    rgba(11, 61, 145, 0.05);

  font-size:
    11px;
}


.subject-full-table tbody tr {
  transition:
    background .13s ease;
}


.subject-full-table tbody tr:hover {
  background:
    rgba(19, 111, 230, 0.04);
}


.subject-full-code {
  color:
    #1469d3;

  font-weight:
    850;
}


.subject-full-name {
  color:
    #173f70;

  font-weight:
    850;
}


/* ==========================================================
   STATUS
   ========================================================== */

.subject-full-status {
  min-height:
    27px;

  padding:
    0 10px;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    850;
}


.subject-full-status.active {
  color:
    #137447;

  background:
    #def5e9;
}


.subject-full-status.inactive {
  color:
    #a43b3b;

  background:
    #fde4e5;
}


.subject-full-status.neutral {
  color:
    #687c94;

  background:
    #e7edf5;
}


/* ==========================================================
   ROW ACTION
   ========================================================== */

.subject-full-row-action {
  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    none;

  border-radius:
    50%;

  color:
    white;

  background:
    linear-gradient(
      180deg,
      #238aff,
      #0b67db
    );

  box-shadow:
    0 3px 0
    #0752b4;

  font-size:
    21px;

  font-weight:
    900;
}


.subject-full-row-action:hover {
  filter:
    brightness(1.06);
}


.subject-full-row-action:active {
  transform:
    translateY(2px);

  box-shadow:
    0 1px 0
    #0752b4;
}


.subject-full-empty,
.subject-full-error {
  padding:
    70px !important;

  text-align:
    center;

  font-weight:
    750;
}


.subject-full-empty {
  color:
    #74869b !important;
}


.subject-full-error {
  color:
    #b13e46 !important;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

.subject-full-pagination {
  min-height:
    70px;

  padding:
    13px 22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid
    rgba(11, 61, 145, 0.07);
}


.subject-full-pagination-info {
  color:
    #71849b;

  font-size:
    10px;

  font-weight:
    750;
}


.subject-full-pagination-buttons {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.subject-full-pagination-buttons button {
  width:
    36px;

  height:
    36px;

  padding:
    0;

  border:
    none;

  border-radius:
    12px;

  color:
    #125db9;

  background:
    #e2edf9;

  font-size:
    20px;

  font-weight:
    900;
}


.subject-full-pagination-buttons button:hover:not(:disabled) {
  background:
    #d6e7fa;
}


.subject-full-pagination-buttons button:disabled {
  opacity:
    .33;

  cursor:
    default;
}


.subject-full-page-number {
  min-width:
    66px;

  text-align:
    center;

  color:
    #496581;

  font-size:
    10px;

  font-weight:
    850;
}


/* ==========================================================
   DETAIL OVERLAY
   ========================================================== */

.subject-full-detail-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    7000;
}


.subject-full-detail-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(2, 22, 50, 0.55);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


/* ==========================================================
   DETAIL PANEL
   ========================================================== */

.subject-full-detail-panel {
  position:
    absolute;

  top:
    14px;

  right:
    14px;

  bottom:
    14px;

  width:
    min(
      500px,
      calc(100% - 28px)
    );

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    rgba(255, 255, 255, 0.96);

  border-radius:
    28px;

  color:
    var(--text-dark);

  background:
    linear-gradient(
      180deg,
      #f9fbff 0%,
      #edf3fa 100%
    );

  box-shadow:
    -12px 0 50px
    rgba(0, 0, 0, 0.30);
}


.subject-full-detail-header {
  min-height:
    92px;

  padding:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid
    rgba(11, 61, 145, 0.08);
}


.subject-full-detail-header span {
  color:
    #7c8fa5;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    1px;
}


.subject-full-detail-header h2 {
  max-width:
    340px;

  margin:
    4px 0 0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(--text-blue);

  font-size:
    21px;

  font-weight:
    900;
}


.subject-full-detail-header button {
  width:
    40px;

  height:
    40px;

  flex:
    0 0 auto;

  padding:
    0;

  border:
    none;

  border-radius:
    50%;

  color:
    #174572;

  background:
    #e2ebf5;

  font-size:
    23px;
}


/* ==========================================================
   DETAIL CONTENT
   ========================================================== */

.subject-full-detail-content {
  flex:
    1;

  overflow:
    auto;

  padding:
    22px;
}


.subject-full-detail-hero {
  margin-bottom:
    22px;

  padding:
    16px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  border:
    1px solid
    rgba(11, 61, 145, 0.07);

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      #e1edff,
      #edf4fc
    );
}


.subject-full-detail-avatar {
  width:
    54px;

  height:
    54px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    16px;

  background:
    #cfdef4;

  font-size:
    23px;
}


.subject-full-detail-hero strong {
  display:
    block;

  color:
    #153f76;

  font-size:
    14px;
}


.subject-full-detail-hero span {
  display:
    block;

  margin-top:
    4px;

  color:
    #778aa0;

  font-size:
    10px;
}


.subject-full-detail-field {
  min-height:
    58px;

  padding:
    11px 4px;

  border-bottom:
    1px solid
    rgba(11, 61, 145, 0.07);
}


.subject-full-detail-field > span {
  display:
    block;

  color:
    #8393a5;

  font-size:
    9px;

  font-weight:
    700;
}


.subject-full-detail-field > strong {
  display:
    block;

  margin-top:
    5px;

  color:
    #264d76;

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.45;

  word-break:
    break-word;
}


.subject-full-detail-section-title {
  margin:
    25px 0 10px;

  color:
    #153f76;

  font-size:
    11px;

  font-weight:
    900;
}


.subject-full-raw pre {
  max-height:
    420px;

  overflow:
    auto;

  margin:
    0;

  padding:
    15px;

  border:
    1px solid
    rgba(11, 61, 145, 0.06);

  border-radius:
    15px;

  color:
    #35516e;

  background:
    #e4ecf5;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size:
    9px;

  line-height:
    1.55;

  white-space:
    pre-wrap;

  word-break:
    break-word;
}


.subject-full-detail-loading,
.subject-full-detail-error {
  padding:
    70px 20px;

  text-align:
    center;

  color:
    #71849b;

  font-size:
    11px;

  font-weight:
    800;
}


.subject-full-detail-error {
  color:
    #b13e46;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
  max-width: 980px
) {

  .subject-full-toolbar {
    flex-wrap:
      wrap;
  }


  .subject-full-search {
    width:
      100%;

    flex-basis:
      100%;
  }


  .subject-full-select {
    flex:
      1;
  }

}


@media (
  max-width: 800px
) {

  .subject-full-hero {
    padding:
      20px;

    align-items:
      flex-start;
  }


  .subject-full-total {
    display:
      none;
  }


  .subject-full-hero h1 {
    font-size:
      26px;
  }


  .subject-full-hero h1 span {
    display:
      block;

    margin:
      3px 0 0;

    font-size:
      15px;
  }


  .subject-full-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .subject-full-search,
  .subject-full-select,
  .subject-full-refresh,
  .subject-full-add {
    width:
      100%;

    min-width:
      0;
  }


  .subject-full-card-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .subject-full-detail-panel {
    top:
      8px;

    right:
      8px;

    bottom:
      8px;

    width:
      calc(100% - 16px);

    border-radius:
      22px;
  }

}


@media (
  max-width: 520px
) {

  .subject-full-back {
    width:
      43px;

    height:
      43px;

    border-radius:
      14px;

    font-size:
      28px;
  }


  .subject-full-hero {
    gap:
      13px;

    border-radius:
      23px;
  }


  .subject-full-hero p {
    display:
      none;
  }


  .subject-full-card {
    border-radius:
      23px;
  }


  .subject-full-pagination {
    gap:
      12px;

    flex-direction:
      column;
  }

}

/* ATOSY BRAND SVG V1 */

.brand-logo {
  overflow: hidden;
}

.brand-logo .atosy-brand-svg {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  border-radius: inherit;

  pointer-events: none;

  user-select: none;

  -webkit-user-drag: none;
}


/* ==========================================================
   ATOSY MODERN TEXT SELECTION V1
   ========================================================== */

/* Bôi đen chữ toàn hệ thống */
::selection {
  background: #2563eb;
  color: #ffffff;
  text-shadow: none;
}

::-moz-selection {
  background: #2563eb;
  color: #ffffff;
  text-shadow: none;
}


/* ==========================================================
   INPUT / TEXTAREA / SELECT
   ========================================================== */

input,
textarea,
select {
  color: #163b72 !important;
  -webkit-text-fill-color: #163b72;
  caret-color: #2563eb;
}


/* Khi bôi đen chữ bên trong input */
input::selection,
textarea::selection {
  background: #2563eb;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: none;
}

input::-moz-selection,
textarea::-moz-selection {
  background: #2563eb;
  color: #ffffff;
}


/* Placeholder rõ nhưng vẫn nhẹ */
input::placeholder,
textarea::placeholder {
  color: #7b93b7 !important;
  -webkit-text-fill-color: #7b93b7;
  opacity: 1 !important;
}


/* ==========================================================
   SUBJECT DETAIL / EDIT / CREATE
   ========================================================== */

.atosy-subject-detail-v5-drawer input,
.atosy-subject-detail-v5-drawer textarea,
.atosy-subject-detail-v5-drawer select {
  color: #153e73 !important;
  -webkit-text-fill-color: #153e73 !important;
  background-color: #f8fbff !important;
}


/* Selection riêng trong modal Subject */
.atosy-subject-detail-v5-drawer input::selection,
.atosy-subject-detail-v5-drawer textarea::selection {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* Focus hiện đại hơn */
.atosy-subject-detail-v5-drawer input:focus,
.atosy-subject-detail-v5-drawer textarea:focus,
.atosy-subject-detail-v5-drawer select:focus {
  outline: none !important;
  border-color: #3b82f6 !important;

  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.13),
    0 8px 22px rgba(37, 99, 235, 0.08) !important;
}


/* Readonly / locked field */
.atosy-subject-detail-v5-drawer input[readonly],
.atosy-subject-detail-v5-drawer input:disabled,
.atosy-subject-detail-v5-drawer textarea[readonly] {
  color: #56749a !important;
  -webkit-text-fill-color: #56749a !important;
  background: #edf4fb !important;
  opacity: 1 !important;
}


/* ==========================================================
   ATOSY PREMIUM NAVY SELECTION V2
   ========================================================== */

/*
  Native text-selection không hỗ trợ gradient ổn định.
  Dùng Deep Navy để tạo cảm giác premium, sắc nét.
*/

::selection {
  background-color: #071a33 !important;
  color: #f7faff !important;
  text-shadow: none !important;
}

::-moz-selection {
  background-color: #071a33 !important;
  color: #f7faff !important;
  text-shadow: none !important;
}


/* ==========================================================
   FORM SELECTION
   ========================================================== */

input::selection,
textarea::selection {
  background-color: #0a2348 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

input::-moz-selection,
textarea::-moz-selection {
  background-color: #0a2348 !important;
  color: #ffffff !important;
}


/* ==========================================================
   SUBJECT CREATE / EDIT / DETAIL
   ========================================================== */

.atosy-subject-detail-v5-drawer input::selection,
.atosy-subject-detail-v5-drawer textarea::selection {
  background-color: #081f42 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* Text bình thường */
.atosy-subject-detail-v5-drawer input,
.atosy-subject-detail-v5-drawer textarea,
.atosy-subject-detail-v5-drawer select {
  color: #102f5c !important;
  -webkit-text-fill-color: #102f5c !important;
}


/* Caret */
.atosy-subject-detail-v5-drawer input,
.atosy-subject-detail-v5-drawer textarea {
  caret-color: #2563eb !important;
}


/* Focus premium navy → electric blue */
.atosy-subject-detail-v5-drawer input:focus,
.atosy-subject-detail-v5-drawer textarea:focus,
.atosy-subject-detail-v5-drawer select:focus {
  outline: none !important;

  border-color: #246fe5 !important;

  box-shadow:
    0 0 0 3px rgba(36, 111, 229, 0.12),
    0 8px 24px rgba(7, 26, 51, 0.10) !important;
}


/* ==========================================================
   ATOSY SUBJECT STATUS FILTER — HIGH CONTRAST V1
   ========================================================== */

/* Ô trạng thái trên toolbar */
#subject-full-status {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-weight: 750 !important;

  background:
    linear-gradient(
      135deg,
      rgba(25, 95, 210, 0.96) 0%,
      rgba(31, 87, 190, 0.96) 55%,
      rgba(19, 68, 155, 0.98) 100%
    ) !important;

  border-color:
    rgba(116, 190, 255, 0.75) !important;

  text-shadow:
    0 1px 2px rgba(0, 23, 65, 0.22) !important;
}


/* Khi hover */
#subject-full-status:hover {
  border-color:
    rgba(145, 210, 255, 0.95) !important;

  box-shadow:
    0 8px 22px rgba(0, 37, 104, 0.18) !important;
}


/* Khi focus */
#subject-full-status:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border-color:
    #75c8ff !important;

  box-shadow:
    0 0 0 3px rgba(72, 181, 255, 0.20),
    0 8px 24px rgba(0, 34, 96, 0.18) !important;
}


/* Các option khi xổ xuống:
   nền sáng + chữ navy để đọc rõ */
#subject-full-status option {
  color: #102f5c !important;
  -webkit-text-fill-color: #102f5c !important;

  background: #ffffff !important;

  font-weight: 600 !important;
}


/* ==========================================================
   ATOSY PASTEL NAVY TEXT SELECTION V3
   Modern · Soft · Professional
   ========================================================== */

/* Selection toàn hệ thống */
::selection {
  background: #a9bed8 !important;
  color: #0b2545 !important;
  text-shadow: none !important;
}

::-moz-selection {
  background: #a9bed8 !important;
  color: #0b2545 !important;
  text-shadow: none !important;
}


/* Selection trong input / textarea */
input::selection,
textarea::selection {
  background: #9fb6d2 !important;
  color: #08213f !important;
  -webkit-text-fill-color: #08213f !important;
  text-shadow: none !important;
}

input::-moz-selection,
textarea::-moz-selection {
  background: #9fb6d2 !important;
  color: #08213f !important;
}


/* Subject Edit / Create */
.atosy-subject-detail-v5-drawer input::selection,
.atosy-subject-detail-v5-drawer textarea::selection {
  background: #a5bad4 !important;
  color: #092544 !important;
  -webkit-text-fill-color: #092544 !important;
}


/* Caret đồng bộ */
.atosy-subject-detail-v5-drawer input,
.atosy-subject-detail-v5-drawer textarea {
  caret-color: #4f7fb8 !important;
}


/* Focus mềm hơn, không quá electric blue */
.atosy-subject-detail-v5-drawer input:focus,
.atosy-subject-detail-v5-drawer textarea:focus,
.atosy-subject-detail-v5-drawer select:focus {
  border-color: #6f98c5 !important;

  box-shadow:
    0 0 0 3px rgba(111, 152, 197, 0.16),
    0 8px 22px rgba(49, 78, 116, 0.08) !important;
}