/* ======================================================
   ERPNext – Seamless Gradient Layout
====================================================== */

:root {
    --primary: #3b82f6;
    /* Main Background Gradient */
    --bg-soft: #f6f8fb;
    --bg-base: #dfe7ee;

    --card-bg: #ffffff;

    --text-dark: #0f172a;
    --text-muted: #64748b;

    --radius-xl: 22px;
    --radius-lg: 16px;

    --glow-primary: rgba(99,102,241,0.05);
    --glow-dark: rgba(15,23,42,0.03);

      --glass-blur: 18px;
  --glass-opacity: 0.36;           
  --glass-accent: rgba(99,102,241,0.08);
  --card-radius: 24px;
  --card-border: rgba(255,255,255,0.45);
  --card-shadow-dark: rgba(15,23,42,0.08);
  --card-shadow-accent: rgba(79,70,229,0.10);
}

html {
  font-size: clamp(15px, 1vw + 14px, 18px);
}

/* ======================================================
   GLOBAL BACKGROUND
====================================================== */
html, body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,0.65), transparent 60%),
    linear-gradient(180deg,
      #f4f6f9 0%,
      #edf1f5 40%,
      #e7ecf2 75%,
      #e2e8ef 100%);
  
  background-attachment: fixed;
  color: #0f172a;
  min-height: calc(100vh + 5px);
}

/* Remove default white wrappers */
.page-container,
.page-wrapper,
.layout-main-section-wrapper,
.layout-main-section {
    background: transparent !important;
}

/* ======================================================
   REMOVE PAGE HEADER (Breadcrumb Area)
   body[data-route*="Workspaces"] .page-head {
    display: none !important;
}
====================================================== */


.page-head,
.timeline-item {
       background: transparent !important;
}

/* ======================================================
   NAVBAR — FULLY TRANSPARENT
====================================================== */

.navbar {
    height: 72px !important;

    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border: none !important;
    box-shadow: none !important;

    position: relative;
    z-index: 10;
}

/* Remove any divider */
.layout-wrapper::before {
    display: none !important;
}

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

.page-container,
.page-wrapper,
.layout-wrapper,
.container {
    max-width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ======================================================
   SIDEBAR (Soft Surface but Blended)
====================================================== */

.layout-side-section {
    padding: 0 !important;
    margin-left: 34px !important;
    margin-top: -20px !important;
    flex: 0 0 260px !important;
    position: relative;
    z-index: 5;
}

.desk-sidebar {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.7);


    box-shadow: 
        0 20px 50px rgba(15,23,42,0.08),
        0 8px 20px rgba(15,23,42,0.06);
    padding: 20px 12px;
    min-height: calc(100vh - 95px);
}

/* Sidebar Items */

.standard-sidebar-item {
    border-radius: 12px;
    padding: 10px 14px !important;
    margin: 6px 6px;
    transition: all 0.25s ease;
}

.standard-sidebar-item:hover {
    background: rgba(99,102,241,0.08);
    transform: translateX(4px);
}

.standard-sidebar-item.selected {
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(79,70,229,0.15);
}

/* ======================================================
   MAIN CONTENT AREA
====================================================== */

.layout-main-section {
    padding-top: 60px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
}

/* ======================================================
   CARDS (Elevated Layer)
====================================================== */

.standard-card,
.module-card,
.widget,
.dashboard-card {

  position: relative;
  border-radius: 26px !important;
  overflow: hidden;

background: linear-gradient(
    145deg,
    rgba(255,255,255,0.32),
    rgba(255,255,255,0.12)
) !important;

backdrop-filter: blur(26px) saturate(155%);
-webkit-backdrop-filter: blur(26px) saturate(155%);

border: 1.8px solid rgba(255,255,255,0.45);

box-shadow:
    0 80px 120px rgba(15,23,42,0.04),
    0 30px 50px rgba(15,23,42,0.05),
    0 10px 20px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.85);

  transition:
    transform 0.5s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.5s cubic-bezier(.2,.8,.2,1);
}

.standard-card,
.module-card,
.widget,
.dashboard-card {
  transform: translateY(-12px);
}

/* subtle light reflection */
.standard-card::before,
.module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      120deg,
      rgba(255,255,255,0.7),
      transparent 40%
  );
  opacity: 0.4;
  pointer-events: none;
}

.standard-card:hover,
.module-card:hover,
.widget:hover,
.dashboard-card:hover {

  transform: translateY(-7px) scale(1.015);

 box-shadow:
    0 120px 160px rgba(15,23,42,0.05),
    0 40px 70px rgba(15,23,42,0.06),
    0 12px 25px rgba(15,23,42,0.05);
}
@media (max-width: 640px) {
  :root { --glass-blur: 10px; }
  .card::after { filter: blur(7px); opacity: 0.28; }
}
@media (max-width: 640px) {
  .standard-card,
  .module-card,
  .widget,
  .dashboard-card {

    box-shadow:
      0 20px 40px rgba(15,23,42,0.06),
      0 8px 16px rgba(15,23,42,0.07);
  }
}
/* ======================================================
   BUTTONS
====================================================== */

.btn-primary {
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: 0 6px 18px rgba(99,102,241,0.25);
    transition: all 0.25s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(99,102,241,0.35);
}

/* ======================================================
   INPUTS
====================================================== */

.form-control,
input,
select,
textarea {
    border-radius: 12px !important;
    border: 1px solid #dde3ee !important;
    background: #ffffff !important;
}

.form-control:focus,
input:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12) !important;
}

/* ======================================================
   TYPOGRAPHY
====================================================== */

html {
    font-size: 18px;
}

.page-title {
    font-weight: 600;
    font-size: 20px;
}

/* ======================================================
   SMOOTH TRANSITIONS
====================================================== */

* {
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* ======================================================
   NAVBAR LAYOUT FIX (Center Search)
====================================================== */

.navbar .container,
.navbar .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative;
}

.navbar .navbar-search,
.navbar .search-bar,
.navbar form[role="search"] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    max-width: 80%;
    text-align: center;
}
.navbar-home img {
    max-height: 80px !important;
}
.navbar input[type="search"],
.navbar .search-input {
    border-radius: 999px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    text-align: center;
}



body[data-route="Workspace"] .layout-main-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}




.btn-new-workspace {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 18px 24px !important;

}

.btn-edit-workspace {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 18px 24px !important;

}
.btn-new-workspace svg,
.btn-edit-workspace svg {
    margin-right: 6px;
}
.icon-xs {
    width: 18px !important;
    height: 18px !important;
}


body[data-route="Workspace"] .layout-main {
    margin-right: 0 !important;
}

body[data-route="Workspace"] .layout-main-section-wrapper {
    padding-right: 0 !important;
}

body[data-route="Workspace"] .layout-main-section {
    padding-right: 0 !important;
    margin-right: 0 !important;
}


.page-container,
.layout-wrapper,
.desk-container,
.page-wrapper,
.container,
.container-fluid {

    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .container,
html[dir="rtl"] .layout-wrapper {
    padding-right: 0 !important;
}

.navbar {
    padding-right: 20px !important;
    padding-left: 20px !important;
}



/* ===============================
   Workspace Link Icons
=============================== */
.widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;    
    padding-bottom: 14px;   
}
.widget-head::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;

background: rgba(15,23,42,0.18);
}

.card-end-icon {
    width: 50px;
    height: 50px;

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

    border-radius: 50%;

border: 1px solid rgba(0,0,0,0.25);
    color: #1f2937;

    font-size: 24px;

background: rgba(255,255,255,0.20);
    backdrop-filter: blur(10px);

    transition: all 0.25s ease;
    margin-bottom: -10px;
}

/* Hover subtle */
.card-end-icon:hover {
    background: rgba(255,255,255,0.85);
    transform: scale(1.05);
}


/* ===============================
   TOP SHORTCUT CARDS STYLE
=============================== */

.widget.shortcut-widget-box .widget-head {
    display: flex;
    align-items: center;
    width: 100%;
}

.widget.shortcut-widget-box .widget-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.widget.shortcut-widget-box .card-modern-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: none !important;
    border: none !important;
    color: #475569;
    transition: color 0.25s ease, transform 0.25s ease;
}

.card-modern-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
}

.widget.shortcut-widget-box:hover .card-modern-icon {
    color: #0f172a;
    transform: translateY(-2px);
}

.widget.shortcut-widget-box .widget-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget.shortcut-widget-box .widget-control svg {
    order: -1;
    margin-inline-end: 6px;
    opacity: 0.7;
    transition: all 0.25s ease;
}

.widget.shortcut-widget-box:hover .widget-control svg {
    opacity: 1;
    transform: translateY(-1px);
}

.widget.shortcut-widget-box .indicator-pill {
    margin-inline-start: auto;
}

/* ===============================
   PREMIUM INDICATOR PILL
=============================== */

.widget.shortcut-widget-box .indicator-pill {

    position: relative;
    overflow: hidden;

    height: 30px;
    min-width: 34px;
    padding: 0 12px;

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

    border-radius: 999px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.55),
        rgba(255,255,255,0.18)
    );

    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);

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

    color: #0f172a;

    box-shadow:
        0 4px 14px rgba(59,130,246,0.12),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.35s cubic-bezier(.4,.2,.2,1);
    line-height: 1; 
    text-align: center;
    margin-top: 5px;
}

/* subtle shine */
.widget.shortcut-widget-box .indicator-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.6),
        transparent 60%
    );
    opacity: 0.4;
    pointer-events: none;
}

/* hover lift */
.widget.shortcut-widget-box:hover .indicator-pill {
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(59,130,246,0.18),
        inset 0 1px 0 rgba(255,255,255,0.9);
}




/* ======================================================
   DARK VARIABLES
====================================================== */

html[data-theme="dark"] {

    --primary: #818cf8;

    --bg-soft: #0f172a;
    --bg-base: #0b1220;

    --card-bg: rgba(30,41,59,0.65);

    --text-dark: #f1f5f9;
    --text-muted: #94a3b8;

    --radius-xl: 22px;
    --radius-lg: 16px;

    --glass-blur: 24px;
    --card-border: rgba(148,163,184,0.15);

}

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

html[data-theme="dark"] body {

  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(99,102,241,0.15), transparent 60%),
    linear-gradient(
      180deg,
      #0f172a 0%,
      #0b1220 50%,
      #070d18 100%
    );

  background-attachment: fixed;
  color: var(--text-dark);
}

/* Remove white wrappers */

html[data-theme="dark"] .page-container,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .layout-main-section-wrapper,
html[data-theme="dark"] .layout-main-section {
    background: transparent !important;
}

/* ======================================================
   NAVBAR
====================================================== */

html[data-theme="dark"] .navbar {
    background: transparent !important;
    box-shadow: none !important;
}

/* ======================================================
   SIDEBAR
====================================================== */

html[data-theme="dark"] .desk-sidebar {

    background: rgba(15,23,42,0.75);

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

    border-radius: var(--radius-xl);
    border: 1px solid rgba(148,163,184,0.1);

    box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

html[data-theme="dark"] .standard-sidebar-item {
    border-radius: 12px;
    padding: 10px 14px !important;
    margin: 6px 6px;
    transition: all 0.25s ease;
    color: var(--text-muted);
}

html[data-theme="dark"] .standard-sidebar-item:hover {
    background: rgba(99,102,241,0.15);
    transform: translateX(4px);
    color: #fff;
}

html[data-theme="dark"] .standard-sidebar-item.selected {
    background: linear-gradient(135deg,#818cf8,#6366f1);
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(99,102,241,0.4);
}

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

html[data-theme="dark"] .layout-main-section {
    padding-top: 60px !important;
}

/* ======================================================
   GLASS CARDS
====================================================== */

html[data-theme="dark"] .standard-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .dashboard-card {

  position: relative;
  border-radius: 26px !important;
  overflow: hidden;

  background: linear-gradient(
      145deg,
      rgba(30,41,59,0.75),
      rgba(15,23,42,0.65)
  ) !important;

  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);

  border: 1px solid rgba(148,163,184,0.15);

  box-shadow:
      0 12px 35px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.05);

  transition: all 0.35s cubic-bezier(.4,.2,.2,1);
}

html[data-theme="dark"] .standard-card:hover,
html[data-theme="dark"] .module-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6);
}

/* ======================================================
   BUTTONS
====================================================== */

html[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg,#818cf8,#6366f1);
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: 0 6px 18px rgba(99,102,241,0.4);
    transition: all 0.25s ease;
}

html[data-theme="dark"] .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(99,102,241,0.5);
}

/* ======================================================
   INPUTS
====================================================== */

html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {

    border-radius: 12px !important;
    border: 1px solid rgba(148,163,184,0.2) !important;
    background: rgba(30,41,59,0.8) !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus {

    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(129,140,248,0.25) !important;
}

/* ======================================================
   TEXT FIXES
====================================================== */

html[data-theme="dark"] .page-title {
    color: #f8fafc;
}

html[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* ======================================================
   SCROLLBAR
====================================================== */

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.4);
    border-radius: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,0.6);
}



.widget.shortcut-widget-box .widget-head {
    display: flex;
    align-items: center;
    position: relative;
}

.widget.shortcut-widget-box .widget-label {
    flex: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.widget.shortcut-widget-box .widget-control {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
}

.widget.shortcut-widget-box .widget-control svg {
    position: absolute;
    right: auto;
    left: calc(100% + 6px); 
    transform: translateX(0);
}

.widget.shortcut-widget-box .widget-control .ml-2 {
    margin-left: 0 !important;
}


html[dir="ltr"] .page-head {
    padding-left: 0 !important;
    padding-right: 50px !important;
}

html[dir="rtl"] .page-head {
    padding-right: 0 !important;
    padding-left: 50px !important;
}
/* ======================================================
   RESPONSIVE ADJUSTMENTS
====================================================== */

@media (max-width: 768px) {

  .workspace-section .col {
    flex: 1 1 100%;
  }

}


@media (max-width: 768px) {

  html {
    font-size: 16px;
  }

  
  .layout-main-section {
    padding: 25px 16px !important;
  }

  /* Navbar search */
  .navbar .navbar-search {
    width: 70%;
  }

  /* Cards */
  .standard-card,
  .module-card,
  .widget,
  .dashboard-card {

    border-radius: 18px !important;

    box-shadow:
      0 15px 30px rgba(15,23,42,0.08);
  }

  /* Indicator pills smaller */
  .indicator-pill {
    height: 24px;
    font-size: 11px;
    padding: 0 10px;
  }

}
@media (max-width: 768px) {

  .standard-sidebar-item,
  .btn-primary,
  .indicator-pill {
    min-height: 44px;
  }

}

@media (max-width: 480px) {

  html {
    font-size: 15px;
  }

  .navbar {
    height: 60px !important;
  }

  .navbar-home img {
    display: none !important;
  }

  .navbar .navbar-search {
    width: 85%;
    font-size: 11px;
  }

  .widget.shortcut-widget-box .widget-head {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .widget.shortcut-widget-box .widget-label {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .widget.shortcut-widget-box .indicator-pill {
    margin-top: 0 !important;
  }
  .card-end-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

}


@media (max-width: 768px) {
  .standard-card,
  .module-card,
  .widget {
    min-height: auto;
  }
}
@media (max-width: 768px) {

  .layout-side-section {
    position: fixed;
    left: -260px;
    top: 80px;
    height: calc(100vh - 80px);
    transition: left 0.3s ease;
  }

  body.sidebar-open .layout-side-section {
    left: 10px;
  }

}


@media (max-width: 480px) {

  .navbar {
    height: 56px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .navbar .container,
  .navbar .container-fluid {
    gap: 8px;
  }

  /* icons smaller */
  .navbar .nav-item i,
  .navbar .dropdown i {
    font-size: 16px;
  }

  /* search smaller */
  .navbar input[type="search"] {
    max-width: 120px;
    height: 32px;
    font-size: 12px;
  }

}


/* =========================================
   MOBILE NAVBAR — FINAL CLEAN FIX
========================================= */

@media (max-width: 768px) {

  .navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .navbar-home,
  .navbar form[role="search"],
  .navbar .search-bar,
  .navbar .navbar-nav {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .navbar .collapse.navbar-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
  }

  .navbar form[role="search"] {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .navbar input#navbar-search {
    width: 100%;
    max-width: 170px;
    height: 34px;
    font-size: 13px;
  }

  .navbar .navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
  }

  .navbar .nav-item svg {
    width: 20px;
    height: 20px;
  }

  .navbar .avatar-medium {
    width: 30px;
    height: 30px;
  }

  #navbar-breadcrumbs {
    display: none !important;
  }

  .navbar-home img {
    display: none !important;
  }

}


/* =========================================
   MOBILE NAVBAR — CLEAN FLEX LAYOUT
========================================= */

@media (max-width: 768px) {

  .navbar .navbar-search,
  .navbar .search-bar,
  .navbar form[role="search"] {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }

  .navbar .collapse.navbar-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    width: 100%;
  }

  .navbar form[role="search"] {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .navbar input#navbar-search {
    width: 100%;
    max-width: 200px;
    height: 36px;
    font-size: 8.5px;
    border-radius: 999px !important;
  }

  .navbar .navbar-nav {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  .navbar .nav-item svg {
    width: 20px;
    height: 20px;
  }

  .navbar .avatar-medium {
    width: 30px;
    height: 30px;
  }

  .navbar-home img,
  #navbar-breadcrumbs {
    display: none !important;
  }

}

.navbar {
  transition: transform 0.35s ease;
}

.navbar.nav-hidden {
  transform: translateY(-100%);
}

.page-head {
  transition: transform 0.35s ease;
}

.nav-hidden + .page-head,
.navbar.nav-hidden ~ .page-head {
  transform: translateY(-100%);
}


.page-head.nav-hidden {
  transform: translateY(-100%);
}
ul.list-unstyled.sidebar-menu {
  margin: 20px !important;
}

.page-form,
.timeline-actions 
.timeline-items {
  background: transparent !important;
}