/*=========================================
Create Program Name : scm-pink.css
Create Date : 21/Sep/2026
Create Description : ธีมสีชมพูของ SCM (ทับ style.bundle.css ของ Keen)
  สีหลักถูกแทนใน style.bundle.css แล้ว (#0BB783 -> #FE7C7C)
  ไฟล์นี้ปรับเฉพาะพื้นหลัง/header/เมนู ให้เหมือน scm เดิม
=========================================*/

:root {
  --scm-bg: #fbd9d9;
  --scm-header: #fe9d9d;
  --scm-header-dark: #fe8282;
  --scm-primary: #fe7c7c;
  --scm-accent: #e35d5d;
  --scm-pinku: #ff5454;
  --scm-row-hover: #fedbdb;
  --scm-row-stripe: #ffe9e9;
}

body,
.page,
.wrapper,
#kt_content {
  background-color: var(--scm-bg) !important;
}

/*begin::Header*/
.header,
.header-mobile {
  background: linear-gradient(90deg, var(--scm-header-dark) 0%, var(--scm-header) 100%) !important;
  box-shadow: 0 2px 10px rgba(227, 93, 93, 0.25);
}
@media (min-width: 992px) {
  .header-menu .menu-nav > .menu-item > .menu-link .menu-text,
  .header-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
    color: #ffffff !important;
    opacity: 0.85;
  }
  .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
  .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
  .header-menu .menu-nav > .menu-item:hover > .menu-link {
    background-color: rgba(255, 255, 255, 0.22) !important;
  }
  .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
  .header-menu .menu-nav > .menu-item:hover > .menu-link .menu-text {
    opacity: 1;
  }
}
.header .topbar .btn.btn-icon .svg-icon svg g [fill],
.header-mobile .svg-icon svg g [fill] {
  fill: #ffffff !important;
}
.scm-brand {
  font-family: "century gothic", Poppins, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #ffffff;
  letter-spacing: 1px;
  white-space: nowrap;
}
.scm-brand:hover { color: #ffffff; }
.scm-brand .pinku { color: #ffffff; background: var(--scm-pinku); border-radius: 6px; padding: 0 6px; margin-left: 4px; }
/*end::Header*/

/*begin::Breadcrumbs*/
#kt_breadcrumbs h4 { color: var(--scm-accent) !important; }
.scm-crumb a { color: var(--scm-accent); font-weight: 600; }
.scm-crumb a:hover { text-decoration: underline; }
.scm-crumb .sep { color: #c9a0a0; margin: 0 6px; }
/*end::Breadcrumbs*/

/*begin::Card & table*/
.card.card-custom { border: 1px solid #ffd3d3; }
.table-hover tbody tr:hover { background-color: var(--scm-row-hover) !important; }
table.dataTable tbody tr.selected { background-color: var(--scm-row-stripe) !important; }
.text-pinku { color: var(--scm-pinku) !important; }
.text-scm { color: var(--scm-accent) !important; }
.bg-scm-light { background-color: var(--scm-row-stripe) !important; }
/*end::Card & table*/

/*begin::Login*/
.login.login-3 .login-aside { background-color: #ffffff; }
.login.login-3 .login-content.bg-main { background-color: var(--scm-bg) !important; }
.login .text-custom1 { color: var(--scm-accent) !important; }
.login .text-custom2 { color: var(--scm-pinku) !important; }
.login .scm-login-logo { font-family: "century gothic", Poppins, sans-serif; font-size: 3.2rem; font-weight: 700; color: #3F4254; }
.login .scm-login-logo span { color: var(--scm-pinku); }
.login .scm-login-switch { border-top: 1px dashed #f3b1b1; }
/*end::Login*/

/*begin::File manager*/
.scm-tree { max-height: 70vh; overflow: auto; }
.scm-tree .jstree-anchor { font-weight: 500; }
.scm-tree .jstree-clicked { background: var(--scm-row-stripe) !important; box-shadow: none !important; color: var(--scm-accent) !important; }
.scm-fname { font-weight: 600; color: #3F4254; word-break: break-word; }
@media (min-width: 992px) {
  td a.scm-fname { display: inline-block; min-width: 240px; }
}
.scm-fname:hover { color: var(--scm-accent); }
.scm-ficon { font-size: 1.6rem; margin-right: 8px; vertical-align: middle; }
.scm-dropzone {
  border: 2px dashed var(--scm-primary);
  border-radius: 12px;
  background: var(--scm-row-stripe);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}
.scm-dropzone.dragover { background: #ffd0d0; }
.scm-uplist { max-height: 45vh; overflow: auto; }
.scm-uplist .progress { height: 6px; }
.scm-folder-card { transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; }
.scm-folder-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(227, 93, 93, 0.2); }
.scm-preview-frame { width: 100%; height: 75vh; border: 0; }
/*end::File manager*/