/* css/styles.css */

@font-face {
  font-family: "Inter";
  src: url(Inter-VariableFont_opsz,wght.ttf)
}

/* =========================
   Global typography
   ========================= */
body {
  margin: 0;
  font-size: 14px;
  /*font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;*/
  font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #323130; /* Azure primary text */
}
 
/* =========================
   Header
   ========================= */
.azure-header {
  background-color: #0078D4;
  height: 48px;
  color: #fff;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

  /* Remove underline in header links */
  .azure-header a,
  .azure-header a:hover,
  .azure-header a:focus,
  .azure-header a:active {
    text-decoration: none !important;
    border-bottom: none !important;
    color: inherit;
  }

  /* Ensure header buttons don’t show underline/border artifacts */
  .azure-header button,
  .azure-header button:hover,
  .azure-header button:focus,
  .azure-header button:active {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

/* Icon buttons */
.azure-icon-btn {
  font-size: 18px;
}

  .azure-icon-btn:hover {
    opacity: 0.85;
  }

.azure-btn {
  height: 40px;
}

/* Logo */
.azure-logo-link {
  display: inline-flex;
  align-items: center;
}

.azure-logo {
  height: 24px;
  width: auto;
  display: block;
}

/* Search box */
.azure-search {
  max-width: 650px;
  height: 34px;
  font-size: 14px;
  border-radius: 4px;
}

/* Profile text */
.azure-profile {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* =========================
   Account dropdown
   ========================= */
.account-menu {
  border-radius: 0 !important;
  border: 1px solid #E1DFDD;
  box-shadow: 0 8px 18px rgba(0,0,0,0.20);
  padding: 0;
  width: 380px;
  margin: 0;
}

.dropdown-menu.account-menu {
  min-width: 380px;
}

.account-menu a {
  text-decoration: none;
}

/* Inner panel wrapper (restore Azure padding) */
.account-pop {
  /*padding: 14px 14px 12px 14px;*/
  color: #323130;
}

/* Tenant / directory section */
.account-tenant-title {
  font-size: 14px;
  font-weight: 600;
}

.account-tenant-sub {
  font-size: 11px;
  color: #605E5C;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Sign out link */
.account-signout-link {
  font-size: 13px;
  color: #106EBE;
  white-space: nowrap;
}

  .account-signout-link:hover {
    text-decoration: underline;
  }

/* Avatar */
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E1DFDD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #605E5C;
}

/* Name / email */
.account-name {
  font-size: 16px;
  font-weight: 600;
}

.account-email {
  font-size: 13px;
  color: #605E5C;
  margin-top: 2px;
}

/* Links inside dropdown */
.account-link {
  font-size: 13px;
  color: #106EBE;
}

  .account-link:hover {
    text-decoration: underline;
  }

/* Three dots button inside panel */
.account-more {
  color: #605E5C;
}

  .account-more:hover {
    opacity: 0.85;
  }


/* Full-width divider like Azure (edge to edge) */
.account-divider {
  border: 0;
  border-top: 1px solid #E1DFDD;
  margin: 10px -14px 0 -14px; /* matches .account-pop padding */
  opacity: 1;
}

/* Footer container */
.account-footer {
  padding: 10px 0 0 0;
  /*background-color: #E1DFDD;*/
}

/* Footer button (full width row) */
.account-footer-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  /*background: #fff;*/
  border: 0;
  text-align: left;
  cursor: pointer;
}

  .account-footer-btn:hover {
    /*background: #F3F2F1;*/
  }

/* Left circular icon in footer */
.account-footer-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #C8C6C4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #605E5C;
  background: #fff;
  flex: 0 0 auto;
  font-size: 18px;
}

/* Footer text */
.account-footer-text {
  font-size: 13px;
  color: #323130;
}

.page-body {
  background: #fff;
}

.page-wrap {
  max-width: 1050px;
  margin: 24px auto 60px auto;
  padding: 0 12px;
}

.section-title {
  letter-spacing: 0.5px;
  color: #323130;  
  border-bottom: 1px solid rgba(204, 204, 204, 0.8);
  padding-bottom: 10px;
  width: 100%;  
  
}

.section-title h5 {
  font-size: 24px;
  font-weight: 600;
  /*font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;*/
}

.soft-card {
  border-radius: 0;
  border: 1px solid #E1DFDD;
}

.details-table th {
  width: 220px;
  font-weight: 700;
  color: #111;
  border-top: 0;
}

.details-table td {
  border-top: 0;
}

.scope-table th {
  font-weight: 700;
}

.total-row td {
  background: #fafafa;
}





/*Subscription detail*/
/* =========================
   Azure Details Layout
   ========================= */

.az-page-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #323130;
  border-bottom: 1px solid rgba(204, 204, 204, 0.8);
  padding-bottom: 10px;
}

.az-details {
  max-width: 1000px;
  padding: 20px 0 16px 0px;  
}

/* Two-column grid */
.az-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 12px;
}

/* Each row */
.az-detail-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  /*border-bottom: 1px solid #E1DFDD;*/
  /*border-bottom: 1px solid rgba(204, 204, 204, 0.8);*/
}

/* Label */
.az-label {
  width: 180px;
  font-size: 14px;
  color: #605E5C; /* Azure secondary text */
}

/* Value */
.az-value {
  font-size: 14px;
  color: #323130;
  font-weight: 400;
}

  /* Link styling */
  .az-value a {
    color: #106EBE;
    text-decoration: none;
  }

    .az-value a:hover {
      text-decoration: underline;
    }


.table-responsive table tbody tr {
  border-top: 1px solid rgb(242 242 242 / 80%);
  border-bottom: 1px solid rgb(242 242 242 / 80%);  
}

  .table-responsive table tbody tr td {
    height: 48px;
  }

.table-responsive table tr th {
  font-weight: bold;   
  font-size: 14px;
  /* color: #0078d4; */
  /*font-family: sans-serif;*/
  letter-spacing: 1.0px;
}

h6 {
  font-size: 18px;
  /*font-family: arial;*/
  font-weight: 500;
  color: #0078d4;
}


.az-form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25em;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

select.az-form-control {
  height: calc(2rem + 1px);
}


/*Css after Add-module*/


/* Section container (no card look) */
.az-clean-section {  
  padding-top: 14px;
  margin-top: 18px;
}

/* Title */
.az-clean-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.az-clean-title {
  font-size: 16px;
  font-weight: 600;
  color: #323130;
  margin: 0;
}

/* Body panel (subtle background, not a "card") */
.az-clean-body {
  /*border: 1px solid #EDEBE9;*/
  padding: 14px 0px 14px 0px;
}

/* Documents list */
.az-doc-list {
  display: grid;
  gap: 10px;
}

.az-doc-item {
  display: block;
  padding: 10px 10px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}

  .az-doc-item:hover {
    background: #F3F2F1;
    border-color: #E1DFDD;
  }

.az-doc-name {
  font-size: 14px;
  font-weight: 600;
  color: #106EBE;
  margin-bottom: 2px;
}

.az-doc-desc {
  font-size: 13px;
  color: #605E5C;
  line-height: 1.35;
}

/* Key/Value grid */
.az-kv-grid {
  display: grid;
}

.az-kv {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  padding: 6px 0 15px 0;
}

  .az-kv:last-child {
    border-bottom: 0;
  }

/* Label + value */
.az-k {
  font-size: 13px;
  /*font-weight: 600;*/
  color: #323130;
  align-content: center;
}

.az-k label {
  padding: 5px 0px 5px 0px;
}

.az-v {
  font-size: 13px;
  color: #323130;
  align-content: center;
}

.section-title .azure-icon-btn:hover {
  background-color: rgb(243, 242, 241);
}

/* Responsive */
@media (max-width: 720px) {
  .az-kv {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

#support-sidepanel {
  display: none;
  width: 350px;
  padding-left: 12px;
  border-left: 1px solid rgba(204, 204, 204, 0.8)
}

body.loading {
  cursor: wait !important;
}

/* ===== Azure-like icon row navigation ===== */
.az-topnav {
  padding: 14px 18px 6px 18px;
  /*border-bottom: 1px solid #E1DFDD;*/
  background: #fff;
}

.az-topnav-title {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 10px;
}

.az-topnav-items {
  display: flex;
  gap: 34px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.az-topnav-item {
  width: 90px;
  text-align: center;
  text-decoration: none;
  color: #323130;
}

.az-topnav-icon {
  font-size: 34px;
  color: #0078D4;
  display: inline-block;
  margin-bottom: 6px;
}

.az-topnav-text {
  font-size: 12.5px;
  line-height: 1.2;
  color: #106EBE; /* azure link style under icon */
}

.az-topnav-item:hover .az-topnav-text {
  text-decoration: underline;
}

.az-topnav-item:hover .az-topnav-icon {
  filter: brightness(0.9);
}

/* Smooth anchor scroll */
html {
  scroll-behavior: smooth;
}

/* IMPORTANT: if you want correct scroll under fixed header, add a top offset */
.az-clean-section {
  scroll-margin-top: 120px; /* header + nav height */
}

.section-back-alt {
  background-color: #f3f5ff;
}

.hidden {
  display: none;
}