.app-frame,
.desk-container {
  --digidel-bg: #09090d;
  --digidel-surface: #111117;
  --digidel-surface-strong: #171720;
  --digidel-text: #f4f4f6;
  --digidel-text-muted: #b5b5bf;
  --digidel-red: #ff3b30;
  --digidel-red-deep: #e11d2f;
  --digidel-orange: #ff8a3d;
  --digidel-border: rgba(255, 98, 77, 0.25);
  --digidel-glow: linear-gradient(135deg, #ff8a3d 0%, #ff3b30 55%, #d9144e 100%);
}

.app-frame .layout-main-section,
.app-frame .page-head,
.app-frame .navbar,
.app-frame .standard-sidebar,
.desk-container .layout-main-section,
.desk-container .page-head,
.desk-container .navbar,
.desk-container .standard-sidebar {
  background: var(--digidel-bg);
  color: var(--digidel-text);
}

.app-frame .navbar,
.app-frame .page-head,
.app-frame .layout-main-section,
.app-frame .layout-main,
.app-frame .page-body,
.app-frame .layout-side-section,
.desk-container .navbar,
.desk-container .page-head,
.desk-container .layout-main-section,
.desk-container .layout-main,
.desk-container .page-body,
.desk-container .layout-side-section {
  color: var(--digidel-text) !important;
}

.app-frame .page-head,
.app-frame .layout-main-section,
.app-frame .standard-sidebar,
.app-frame .widget,
.app-frame .form-section,
.desk-container .page-head,
.desk-container .layout-main-section,
.desk-container .standard-sidebar,
.desk-container .widget,
.desk-container .form-section {
  border-color: var(--digidel-border);
}

.app-frame .btn-primary,
.app-frame .standard-actions .btn-primary,
.app-frame .page-actions .btn-primary,
.desk-container .btn-primary,
.desk-container .standard-actions .btn-primary,
.desk-container .page-actions .btn-primary {
  background: var(--digidel-glow);
  border: none;
  color: #ffffff;
}

.app-frame .navbar-brand,
.desk-container .navbar-brand {
  color: var(--digidel-text) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Keep navbar/header text readable on dark background */
.app-frame .navbar,
.app-frame .navbar a,
.app-frame .navbar .navbar-brand,
.app-frame .navbar .navbar-item,
.app-frame .navbar .dropdown-toggle,
.app-frame .navbar .avatar,
.app-frame .navbar .icon,
.app-frame .page-head,
.app-frame .page-head .title-text,
.app-frame .page-title .title-text,
.desk-container .navbar,
.desk-container .navbar a,
.desk-container .navbar .navbar-brand,
.desk-container .navbar .navbar-item,
.desk-container .navbar .dropdown-toggle,
.desk-container .navbar .avatar,
.desk-container .navbar .icon,
.desk-container .page-head,
.desk-container .page-head .title-text,
.desk-container .page-title .title-text {
  color: var(--digidel-text) !important;
}

/* Hide only default Frappe/ERPNext mark assets in Desk navbar/header */
.app-frame .navbar img.erpnext-icon,
.app-frame .navbar img.frappe-logo,
.app-frame .navbar .app-logo img.erpnext-icon,
.app-frame .navbar .app-logo img.frappe-logo,
.app-frame .navbar-header img.erpnext-icon,
.app-frame .navbar-header img.frappe-logo,
.desk-container .navbar img.erpnext-icon,
.desk-container .navbar img.frappe-logo,
.desk-container .navbar .app-logo img.erpnext-icon,
.desk-container .navbar .app-logo img.frappe-logo,
.desk-container .navbar-header img.erpnext-icon,
.desk-container .navbar-header img.frappe-logo {
  display: none !important;
}

.app-frame .navbar-brand::before,
.app-frame .navbar-home::before,
.desk-container .navbar-brand::before,
.desk-container .navbar-home::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  display: inline-block;
  background-image: url("/assets/company_ops/img/digidel-logo-red.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.app-frame a,
.app-frame .like-disabled-input,
.app-frame .indicator-pill,
.desk-container a,
.desk-container .like-disabled-input,
.desk-container .indicator-pill {
  color: var(--digidel-orange);
}

.app-frame .breadcrumb-item,
.app-frame .breadcrumb-item a,
.app-frame .page-title .title-text,
.app-frame .form-title,
.app-frame .list-subject,
.app-frame .list-row-head,
.app-frame .control-label,
.app-frame .filter-label,
.app-frame .filter-section,
.app-frame .sidebar-item-label,
.app-frame .layout-main-section .text-muted,
.app-frame .desk-sidebar .standard-sidebar-item,
.app-frame .desk-sidebar .standard-sidebar-item a,
.desk-container .breadcrumb-item,
.desk-container .breadcrumb-item a,
.desk-container .page-title .title-text,
.desk-container .form-title,
.desk-container .list-subject,
.desk-container .list-row-head,
.desk-container .control-label,
.desk-container .filter-label,
.desk-container .filter-section,
.desk-container .sidebar-item-label,
.desk-container .layout-main-section .text-muted,
.desk-container .desk-sidebar .standard-sidebar-item,
.desk-container .desk-sidebar .standard-sidebar-item a {
  color: var(--digidel-text) !important;
}

.app-frame .text-muted,
.app-frame .small,
.app-frame .help-box,
.app-frame .comment-content,
.app-frame .layout-main-section .small,
.desk-container .text-muted,
.desk-container .small,
.desk-container .help-box,
.desk-container .comment-content,
.desk-container .layout-main-section .small {
  color: var(--digidel-text-muted) !important;
}

.app-frame .list-row-container,
.app-frame .list-row-head,
.app-frame .list-filters,
.app-frame .result,
.app-frame .widget,
.app-frame .number-card,
.app-frame .standard-sidebar,
.app-frame .desk-sidebar,
.desk-container .list-row-container,
.desk-container .list-row-head,
.desk-container .list-filters,
.desk-container .result,
.desk-container .widget,
.desk-container .number-card,
.desk-container .standard-sidebar,
.desk-container .desk-sidebar {
  background-color: var(--digidel-surface) !important;
  border-color: var(--digidel-border) !important;
}

.app-frame .digidel-hub,
.desk-container .digidel-hub {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0.6rem 0 0.8rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--digidel-border);
  border-radius: 0.7rem;
  background: linear-gradient(
    160deg,
    rgba(255, 59, 48, 0.14) 0%,
    rgba(255, 138, 61, 0.08) 40%,
    rgba(17, 17, 23, 0.96) 100%
  );
  backdrop-filter: blur(4px);
}

.app-frame .digidel-hub-title,
.desk-container .digidel-hub-title {
  margin-right: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--digidel-text-muted);
}

.app-frame .digidel-hub-links,
.desk-container .digidel-hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.app-frame .digidel-hub-link,
.desk-container .digidel-hub-link {
  border: 1px solid rgba(255, 138, 61, 0.35);
  border-radius: 999px;
  padding: 0.32rem 0.72rem;
  background: rgba(18, 18, 24, 0.94);
  color: var(--digidel-text) !important;
  font-size: 0.78rem;
  line-height: 1.2;
  text-decoration: none !important;
}

.app-frame .digidel-hub-link:hover,
.app-frame .digidel-hub-link:focus,
.desk-container .digidel-hub-link:hover,
.desk-container .digidel-hub-link:focus {
  border-color: var(--digidel-orange);
  box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.24);
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .app-frame .btn,
  .app-frame .btn.btn-sm,
  .app-frame .btn.btn-xs,
  .app-frame .btn-group > .btn,
  .app-frame .page-form .btn,
  .app-frame .standard-actions .btn,
  .app-frame .page-actions .btn,
  .desk-container .btn,
  .desk-container .btn.btn-sm,
  .desk-container .btn.btn-xs,
  .desk-container .btn-group > .btn,
  .desk-container .page-form .btn,
  .desk-container .standard-actions .btn,
  .desk-container .page-actions .btn {
    padding: 0.35rem 0.6rem;
    min-height: 2rem;
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .app-frame .btn.btn-lg,
  .app-frame .btn-lg,
  .desk-container .btn.btn-lg,
  .desk-container .btn-lg {
    padding: 0.45rem 0.75rem;
    min-height: 2.2rem;
    font-size: 0.82rem;
  }

  .app-frame .page-head,
  .app-frame .page-title,
  .app-frame .layout-main-section,
  .desk-container .page-head,
  .desk-container .page-title,
  .desk-container .layout-main-section {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .app-frame .page-title .title-text,
  .app-frame .ellipsis,
  .app-frame .list-row-head,
  .app-frame .list-subject,
  .app-frame .form-page .title-area .title-text,
  .desk-container .page-title .title-text,
  .desk-container .ellipsis,
  .desk-container .list-row-head,
  .desk-container .list-subject,
  .desk-container .form-page .title-area .title-text {
    font-size: 0.92rem;
  }

  .app-frame .page-actions,
  .app-frame .standard-actions,
  .desk-container .page-actions,
  .desk-container .standard-actions {
    gap: 0.3rem;
  }
}

/* ===== Login page branding =====
   Note: app_include_css is loaded on the login page; web_include_css is not.
   Login branding rules are kept here so they survive bench build. ===== */
body.for-login .page-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

body.for-login .page-card-head img {
  display: none !important;
}

body.for-login .page-card-head::before {
  content: "";
  width: 3.25rem;
  height: 3.25rem;
  display: inline-block;
  background-image: url("/assets/company_ops/img/digidel-logo-red.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Deterministic login-only navbar branding (top-left mark). */
body.for-login .navbar-home img,
body.for-login .navbar-brand img,
body.for-login .app-logo img,
body.for-login img.erpnext-icon,
body.for-login img.frappe-logo {
  display: none !important;
}

body.for-login .navbar-home,
body.for-login .navbar-brand,
body.for-login .app-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

body.for-login .navbar-home::before,
body.for-login .navbar-brand::before,
body.for-login .app-logo::before {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
  background-image: url("/assets/company_ops/img/digidel-logo-red.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Replace default login heading text without JS. */
body.for-login .page-card-head h3,
body.for-login .page-card-head h4,
body.for-login .page-card-head .h3,
body.for-login .page-card-head .h4 {
  position: relative;
  color: transparent !important;
}

body.for-login .page-card-head h3::after,
body.for-login .page-card-head h4::after,
body.for-login .page-card-head .h3::after,
body.for-login .page-card-head .h4::after {
  content: "Login to DIGIDEL";
  position: absolute;
  inset: 0;
  color: var(--digidel-text);
  text-align: center;
}

/* Force branded primary login button (no white background). */
body.for-login .btn-primary,
body.for-login .btn-primary:hover,
body.for-login .btn-primary:focus,
body.for-login .btn-primary:active,
body.for-login .btn-login .btn-primary {
  background: var(--digidel-glow) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(255, 59, 48, 0.32);
}