/* Material3 Design Theme for ERPNext 15 Developed by Itrostack LLP */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);

:root {
  --md-sys-color-primary: rgb(60 96 144);
    --md-sys-color-surface-tint: rgb(60 96 144);
    --md-sys-color-on-primary: rgb(255 255 255);
    --md-sys-color-primary-container: rgb(212 227 255);
    --md-sys-color-on-primary-container: rgb(0 28 58);
    --md-sys-color-secondary: rgb(84 95 113);
    --md-sys-color-on-secondary: rgb(255 255 255);
    --md-sys-color-secondary-container: rgb(216 227 248);
    --md-sys-color-on-secondary-container: rgb(17 28 43);
    --md-sys-color-tertiary: rgb(110 86 118);
    --md-sys-color-on-tertiary: rgb(255 255 255);
    --md-sys-color-tertiary-container: rgb(247 216 255);
    --md-sys-color-on-tertiary-container: rgb(39 20 48);
    --md-sys-color-error: rgb(186 26 26);
    --md-sys-color-on-error: rgb(255 255 255);
    --md-sys-color-error-container: rgb(255 218 214);
    --md-sys-color-on-error-container: rgb(65 0 2);
    --md-sys-color-background: rgb(249 249 255);
    --md-sys-color-on-background: rgb(25 28 32);
    --md-sys-color-surface: rgb(249 249 255);
    --md-sys-color-on-surface: rgb(25 28 32);
    --md-sys-color-surface-variant: rgb(224 226 236);
    --md-sys-color-on-surface-variant: rgb(67 71 78);
    --md-sys-color-outline: rgb(116 119 127);
    --md-sys-color-outline-variant: rgb(195 198 207);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(46 48 53);
    --md-sys-color-inverse-on-surface: rgb(240 240 247);
    --md-sys-color-inverse-primary: rgb(166 200 255);
    --md-sys-color-primary-fixed: rgb(212 227 255);
    --md-sys-color-on-primary-fixed: rgb(0 28 58);
    --md-sys-color-primary-fixed-dim: rgb(166 200 255);
    --md-sys-color-on-primary-fixed-variant: rgb(34 72 118);
    --md-sys-color-secondary-fixed: rgb(216 227 248);
    --md-sys-color-on-secondary-fixed: rgb(17 28 43);
    --md-sys-color-secondary-fixed-dim: rgb(188 199 220);
    --md-sys-color-on-secondary-fixed-variant: rgb(61 71 88);
    --md-sys-color-tertiary-fixed: rgb(247 216 255);
    --md-sys-color-on-tertiary-fixed: rgb(39 20 48);
    --md-sys-color-tertiary-fixed-dim: rgb(218 189 226);
    --md-sys-color-on-tertiary-fixed-variant: rgb(85 63 93);
    --md-sys-color-surface-dim: rgb(217 218 224);
    --md-sys-color-surface-bright: rgb(249 249 255);
    --md-sys-color-surface-container-lowest: rgb(255 255 255);
    --md-sys-color-surface-container-low: rgb(243 243 250);
    --md-sys-color-surface-container: rgb(237 237 244);
    --md-sys-color-surface-container-high: rgb(231 232 238);
    --md-sys-color-surface-container-highest: rgb(225 226 233);
    --md-extended-color-custom-color-color: rgb(58 96 143);
    --md-extended-color-custom-color-on-color: rgb(255 255 255);
    --md-extended-color-custom-color-color-container: rgb(211 227 255);
    --md-extended-color-custom-color-on-color-container: rgb(0 28 57);
    /* material elevation - shadows */
    --md-shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --md-shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --md-shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --md-shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --md-shadow-form: inset 0 1px 2px rgb(0 0 0 / 20%);
    /* Typography */
    --md-font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    --md-font-weight-regular: 400;
    --md-font-weight-medium: 500;
    --md-font-weight-bold: 700;
  }
  
  [data-theme=material] {
    /* Map your theme variables to material Design variables */
    --primary: var(--md-sys-color-primary);
    --dt-primary-color: var(--md-sys-color-primary);
    --blue-avatar-bg: var(--md-sys-color-primary);
    --blue-avatar-color: var(--md-sys-color-primary);
    --blue: var(--md-sys-color-primary);
  }
  
  /* General Styling */
  [data-theme=material] body {
    font-family: var(--md-font-family);
    background-color: var(--md-grey-100);
    color: var(--md-grey-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* font-family: 'Roboto', sans-serif;
    font-size: 14px;
    background-color: var(--md-background);
    color: var(--md-on-background);
    letter-spacing: 0.15px;
    line-height: 1.5; */
  }
/*   
  [data-theme=material] a {
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
  }
*/
  [data-theme=material] a:hover {
    color: var(--md-sys-color-primary);
  }
  
  [data-theme=material] .small, 
  [data-theme=material] small {
    font-size: 95%;
  }
  
  [data-theme=material] .h6.uppercase, 
  [data-theme=material] h6.uppercase {
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
  }
  
  /* Containers and Layout */
  [data-theme=material] .page-container,
  [data-theme=material] .layout-main-section {
    background-color: var(--md-sys-color-surface-bright);
  }
  
  [data-theme=material] .layout-side-section {
    font-size: 14px;
  }
  
  /* Navigation Bar */
  [data-theme=material] .navbar {
    /* background-color: var(--md-primary) !important; */
    background: linear-gradient(to right, var(--md-sys-color-primary), var(--md-sys-color-primary)) !important;
    border: none !important;
    box-shadow: var(--md-shadow-2);
    height: 56px;
    display: flex;
    align-items: center;
  }
  
  [data-theme=material] .navbar-nav > li > a {
    color: var(--md-sys-color-on-primary) !important;
    font-weight: 800;
    /* padding: 16px; */
    transition: background-color 0.2s;
  }
  
  /* [data-theme=material] .navbar-nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--md-sys-color-on-primary) !important;
  } */
  
  [data-theme=material] .navbar-brand:hover {
    color: var(--md-sys-color-on-primary) !important;
  }
  
  /* Hide Help dropdown button */
  [data-theme=material] .dropdown-help,
  [data-theme=material] .nav-item.dropdown-help,
  [data-theme=material] li.dropdown-help,
  [data-theme=material] button[aria-controls="toolbar-help"],
  [data-theme=material] #toolbar-help {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  
  /* Also hide without theme selector as fallback */
  .dropdown-help,
  .nav-item.dropdown-help,
  li.dropdown-help,
  button[aria-controls="toolbar-help"],
  #toolbar-help {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  
  /* Sidebar Navigation */
  [data-theme=material] .standard-sidebar-item {
    /* border-radius: 0 24px 24px 0; */
    margin-right: 8px;
    transition: background-color 0.2s;
  }
  
  [data-theme=material] .standard-sidebar-item.selected {
    background-color: var(--md-sys-color-primary);
    box-shadow: var(--md-shadow-2);
  }
  
  [data-theme=material] .standard-sidebar-item.selected a {
    color: var(--md-sys-color-on-primary);
  }
  
  [data-theme=material] .standard-sidebar-item.selected a svg {
    fill: var(--md-sys-color-on-primary);
  }
  
  [data-theme=material] .standard-sidebar-item:hover {
    background-color: var(--md-sys-color-primary-container);
  }
  
  [data-theme=material] .standard-sidebar-item:hover a {
    color: var(--md-sys-color-primary);
  }
  
  [data-theme=material] .standard-sidebar-item:hover svg {
    fill: var(--md-sys-color-primary);
  }
  
  /* Cards/Widgets */
  [data-theme=material] .widget {
    /* background-color: var(--md-surface); */
    background-color: var(--md-sys-color-surface-bright);
    border: none;
    border-radius: 4px;
    box-shadow: var(--md-shadow-1);
    transition: box-shadow 0.3s ease-in-out;
    /* overflow: hidden; */
    /* margin-bottom: 16px; */
    /* padding: 5px 5px; */
  }
  
  [data-theme=material] .widget:hover {
    box-shadow: var(--md-shadow-2);
    border-bottom: 1px solid var(--md-sys-color-primary);
  }
  
  /* [data-theme=material] .widget .widget-head {
    padding: 16px;
  } */
  
  [data-theme=material] .widget .widget-head .widget-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--md-sys-color-on-primary-container);
  }
  
  [data-theme=material] .widget.shortcut-widget-box .widget-head .widget-title i {
    color: var(--md-sys-color-primary);
  }
  
  /* [data-theme=material] .widget-body {
    padding: 8px 16px 16px 16px;
  } */
  
  [data-theme=material] .widget-body .link-item {
    /* padding: 8px 16px; */
    border-radius: 4px;
    /* transition: background-color 0.2s, color 0.2s; */
  }
  
  [data-theme=material] .widget-body .link-item:hover {
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary);
  }
  .widget.links-widget-box .link-item .link-content:hover {
    color: white;
  }
  
  /* Dropdowns */
  [data-theme=material] .dropdown-menu {
    border-radius: 4px;
    box-shadow: var(--md-shadow-2);
    border: none;
    padding: 8px 0;
  }

  [data-theme=material] .dropdown-item
  {
    border-radius: 4px;
  }

  [data-theme=material] .dropdown-item:hover,
  [data-theme=material] .dropdown-item:focus
  {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    box-shadow: var(--md-shadow-1);
    font-weight: bold;
  }
  
  [data-theme=material] .dropdown-menu > li > a {
    font-size: 14px;
    color: var(--md-sys-color-on-primary-container);
    font-weight: 400;
    /* padding: 12px 16px; */
  }
  
  /* [data-theme=material] .dropdown-menu > li > a:hover {
    background-color: rgba(98, 0, 238, 0.08);
    color: var(--md-primary);
  } */
  [data-theme=modern] ul li a:hover {
    background-color: var(--md-sys-color-primary);
    color: #fff;
  }

  [data-theme=material] .awesomplete > ul {
    border-radius: 4px;
    box-shadow: var(--md-shadow-2);
    border: none;
  }
  
  [data-theme=material] .awesomplete > ul > li {
    /* padding: 12px 16px; */
    transition: background-color 0.2s, color 0.2s;
  }
  
  [data-theme=material] .awesomplete > ul > li[aria-selected=true] {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
  }
 
  [data-theme=material] .awesomplete > ul > li:hover {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary) !important;
    box-shadow: var(--md-shadow-1);
  } 
  
  /* Page Heading */
  [data-theme=material] .page-head {
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    background-color: var(--md-sys-color-surface-bright);
    /* padding: 16px 24px; */
  }
  
  [data-theme=material] .page-title .title-text {
    color: var(--md-sys-color-on-primary-container);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.15px;
  }
  
  [data-theme=material] .section-head {
    font-size: 16px;
    /* font-weight: 500; */
    color: var(--md-sys-color-on-primary-container);
    letter-spacing: 0.15px;
    /* margin: 24px 0 16px 0; */
  }
  
  /* List Views */
  [data-theme=material] .list-row-head {
    /* background-color: var(--md-surface); */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    /* padding: 8px 16px; */
  }
  
  [data-theme=material] .navbar-home img {
    max-height: 48px;
    width: auto;
    border-radius: 8px;
    box-shadow: var(--md-shadow-2) ;
    background-color: var(--md-sys-color-inverse-on-surface);
  
    /* Optional: Add a slight lift with transform */
    transform: translateY(-2px);
  
    /* Smooth transitions for hover effects */
    transition: all 0.3s ease;
  }
  
  /* Buttons */
  [data-theme=material] .btn {
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    padding: 8px 16px;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: none;
    border: none;
  }
  
  [data-theme=material] .btn-primary {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    box-shadow: var(--md-shadow-1);
    border: 1px solid var(--md-sys-color-primary);
  }
  
  [data-theme=material] .btn-primary:hover,
  [data-theme=material] .btn-primary:focus,
  [data-theme=material] .btn-primary.focus,
  [data-theme=material] .btn-primary:active,
  [data-theme=material] .btn-primary.active,
  [data-theme=material] .open > .dropdown-toggle.btn-primary {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    box-shadow: var(--md-shadow-1);
  }
  
  [data-theme=material] .btn-default {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    box-shadow: var(--md-shadow-1);
  }

  [data-theme=material] .nav-link.active {
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 3px solid var(--md-sys-color-primary) !important;
    /* box-shadow: var(--md-shadow-4); */
  }
  
  [data-theme=material] .btn-default:hover,
  [data-theme=material] .btn-default:focus,
  [data-theme=material] .btn-default.focus,
  [data-theme=material] .btn-default:active,
  [data-theme=material] .btn-default.active,
  [data-theme=material] .open > .dropdown-toggle.btn-default {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary) !important;
    box-shadow: var(--md-shadow-1);
    border-bottom: 1px solid var(--md-sys-color-primary);
  }
  
  [data-theme=material] .btn-secondary {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-primary);
    box-shadow: var(--md-shadow-1);
  }
  
  [data-theme=material] .btn-secondary:hover,
  [data-theme=material] .btn-secondary:focus,
  [data-theme=material] .btn-secondary.focus,
  [data-theme=material] .btn-secondary:active,
  [data-theme=material] .btn-secondary.active,
  [data-theme=material] .open > .dropdown-toggle.btn-secondary {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    box-shadow: var(--md-shadow-2);
  }
  
  [data-theme=material] .std-form-layout > .form-layout > .form-page {
    background-color: var(--md-sys-color-surface-bright);
  }
  /* Form Controls */
  [data-theme=material] .form-control {
    border-radius: 4px;
    border-bottom: 1px solid var(--md-sys-color-primary);
    box-shadow: var(--md-shadow-form);
    /* padding: 8px 12px; */
    transition: border-color 0.2s;
    background-color: var(--md-sys-color-surface-dim);
  }


  [data-theme=material] .like-disabled-input {
    /* background-color: #e7eaeb; */
    background-color: var(--md-sys-color-surface-dim);
    border-bottom: 1px solid var(--md-sys-color-primary);
    /* border: 1px solid var(--md-secondary); */
    box-shadow: var(--md-shadow-form);
  }

  .frappe-control .link-btn {
    background-color: unset;
  }
  
  [data-theme=material] .form-control:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: none;
  }
  
  [data-theme=material] .control-label {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 8px;
  }
  
  /* Checkboxes */
  [data-theme=material] input[type=checkbox] {
    border-radius: 2px;
    transition: background-color 0.2s;
  }
    
  [data-theme=material] input[type=checkbox]:checked:before {
    color: var(--md-sys-color-on-primary);
  }
  
  /* Rich Text Editor */
  [data-theme=material] .frappe-control .ql-editor:not(.read-mode) {
    /* background: var(--md-surface); */
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
  }
  
  /* .ellipsis, .awesomplete > [role=listbox] > li, .awesomplete > [role=listbox] > [role=option], .widget.shortcut-widget-box .indicator-pill 
  {
    overflow: visible;
    
  } */
  /* Indicators and Badges */
  [data-theme=material] .indicator-pill,
  [data-theme=material] .indicator-pill-right,
  [data-theme=material] .indicator-pill-round {
    border-radius: 16px;
    /* padding: 2px 10px; */
    font-size: 12px;
    font-weight: 500;
    /* box-shadow: var(--md-shadow-2) !important; */
  }
  
  [data-theme=material] .indicator-pill.grey,
  [data-theme=material] .indicator-pill-right.grey,
  [data-theme=material] .indicator-pill-round.grey {
    background: #525252;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.gray,
  [data-theme=material] .indicator-pill-right.gray,
  [data-theme=material] .indicator-pill-round.gray {
    background: #525252;
    color: white;
    box-shadow: var(--md-shadow-2);
  }
  
  [data-theme=material] .indicator-pill.green,
  [data-theme=material] .indicator-pill-right.green,
  [data-theme=material] .indicator-pill-round.green {
    background: #16794c;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.blue,
  [data-theme=material] .indicator-pill-right.blue,
  [data-theme=material] .indicator-pill-round.blue {
    background: #0070cc;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.red,
  [data-theme=material] .indicator-pill-right.red,
  [data-theme=material] .indicator-pill-round.red {
    background: #b52a2a;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.orange,
  [data-theme=material] .indicator-pill-right.orange,
  [data-theme=material] .indicator-pill-round.orange {
    background: #bd3e0c;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.cyan,
  [data-theme=material] .indicator-pill-right.cyan,
  [data-theme=material] .indicator-pill-round.cyan {
    background: #267a94;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.light-blue,
  [data-theme=material] .indicator-pill-right.light-blue,
  [data-theme=material] .indicator-pill-round.light-blue {
    background: #007be0;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.pink,
  [data-theme=material] .indicator-pill-right.pink,
  [data-theme=material] .indicator-pill-round.pink {
    background: #9c2671;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.yellow,
  [data-theme=material] .indicator-pill-right.yellow,
  [data-theme=material] .indicator-pill-round.yellow {
    background: #ab6e05;
    color: white;
    box-shadow: var(--md-shadow-2);
  }

  [data-theme=material] .indicator-pill.purple,
  [data-theme=material] .indicator-pill-right.purple,
  [data-theme=material] .indicator-pill-round.purple {
    background: #6e399d;
    color: white;
    box-shadow: var(--md-shadow-2);
  }
  
  [data-theme=material] .document-link-badge .count {
    background-color: var(--md-sys-color-primary) !important;
    color: white !important;
    box-shadow: var(--md-shadow-1);
    border-radius: 2px !important;
    padding: 2px 8px;
  }
  
  [data-theme=material] .document-link-badge {
    /* background-color: var(--md-surface) !important; */
    border-radius: 4px !important;
    box-shadow: var(--md-shadow-1);
  }
  
  [data-theme=material] .document-link button {
    /* background: var(--md-primary) !important; */
    color: var(--md-sys-color-on-primary) !important;
    border-radius: 4px;
  }
  
  /* material Ripple Effect (needs JavaScript to fully implement) */
  .md-ripple {
    position: relative;
    overflow: hidden;
  }
  
  .md-ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
  }
  
  .md-ripple:active:after {
    transform: scale(0, 0);
    opacity: .2;
    transition: 0s;
  }
  
  
  /* Notifications */
  [data-theme=material] .notifications-icon svg {
    stroke: var(--md-sys-color-on-primary);
    fill: var(--md-sys-color-on-primary);
  }