/* Custom CSS Variables */
:root{

    /* Primary Brand */
    --primary-teal:#E74C3C;         
    --primary-teal-light:#FFF2F0;

    /* Sidebar */
    --dark-sidebar:#8B2E22;
    --dark-sidebar-inner:#6F241A;

    --teal-sidebar:#B6402E;
    --teal-sidebar-inner:#8A2E22;

    /* Success */
    --success-emerald:#F4B400;

    /* Background */
   --bg-light-slate:#FCF8F6;

    /* Borders */
    --border-color:#E7D6D1;

    /* Text */
    --text-slate-800:#3B2C28;
    --text-slate-600:#6B5A55;
    --text-slate-500:#8A7A74;
    --text-slate-400:#B2A39C;
    --text-slate-300:#F2E6E2;

    /* Accent Colors */
    --color-blue:#F4B400;
    --color-indigo:#E74C3C;
    --color-rose:#C0392B;
    --color-amber:#F4B400;
}

/* Global Styles */
body {
    font-family: 'Lato', sans-serif;
    background-color: var(--bg-light-slate);
    color: var(--text-slate-800);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
.page-template-template-patient-record-app-php #main-nav,
.page-template-template-patient-record-app-php #footer {
    display: none;
}
/* Typography & Colors */
.text-teal { color: var(--primary-teal) !important; }
.bg-teal { background-color: var(--primary-teal) !important; }
.bg-teal-light { background-color: var(--primary-teal-light) !important; }
.border-teal { border-color: var(--primary-teal) !important; }
.text-slate-800 { color: var(--text-slate-800) !important; }
.text-slate-500 { color: var(--text-slate-500) !important; }
.text-slate-400 { color: var(--text-slate-400) !important; }
.text-slate-300 { color: var(--text-slate-300) !important; }
.text-emerald { color:#FFE082!important }
.text-emerald-light { color: #A7F3D0 !important; }
.text-teal-light { color: #5EEAD4 !important; }
.text-blue { color: var(--color-blue) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.text-indigo { color: var(--color-indigo) !important; }
.text-rose { color: var(--color-rose) !important; }
.text-amber { color: var(--color-amber) !important; }
.text-warning-dark { color: #B45309 !important; }

/* Sticky Sidebar Desktop */
@media (min-width: 992px) {
    .sticky-top-sidebar {
        position: sticky;
        top: 20px;
        z-index: 10;
    }
}

/* Cards & Layout */
.card {
    border-radius: 8px;
}

.header-card {
    background-color: #FFFFFF;
}

.header-icon-box {
    width: 44px;
    height: 44px;
    background-color: var(--primary-teal-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
}

.section-title {
    font-size: 13px;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Forms */
.form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-slate-600);
    margin-bottom: 4px;
}

.form-control, .form-select {
    font-size: 13px;
    color: var(--text-slate-800);
    border-color: var(--border-color);
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.15);
}

.bg-read-only {
    background-color: #F1F5F9 !important;
    color: var(--text-slate-500);
}

.info-note {
    font-size: 12px;
    color: var(--text-slate-500);
    background-color: #F0FDF4;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #DCFCE7;
}

.badge-unit {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Custom Checkbox Card Buttons */
/* Custom Checkbox Card Buttons */
.custom-card-checkbox {
    position: relative;
}

.custom-card-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-card-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-slate-600);
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: .2s ease;
}

/* Checkbox square */
.custom-card-checkbox label::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: .2s ease;
}

/* Checked card */
.custom-card-checkbox input:checked + label {
    background: #F0FDF4;
    border-color: var(--success-emerald);
    color: var(--text-slate-800);
}

/* Checked icon */
.custom-card-checkbox input:checked + label::before {
    content: "✓";
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #fff;

    background: var(--success-emerald);
    border-color: var(--success-emerald);

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

/* Buttons */
.btn-outline-slate {
    color: var(--text-slate-600);
    border-color: var(--border-color);
    background-color: #FFFFFF;
}

.btn-outline-slate:hover {
    background-color: #F1F5F9;
    color: var(--text-slate-800);
    border-color: #F2E6E2;
}

.btn-emerald {
    background-color: #E74C3C;
    color: #FFFFFF;
    border: none;
}

.btn-emerald:hover {
    background-color: #C0392B;
    color: #FFFFFF;
}

/* Sidebar Styling */
.dark-sidebar-card {
  background:linear-gradient(180deg,#E85B47 0%,#D64A38 100%);
}

.nested-dark-box {
      background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius: 6px;
}

.bg-emerald-badge {
    background-color: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.sidebar-mini-header {
    font-size: 11px;
    letter-spacing: 0.05em;
}

.extra-small {
    font-size: 11px;
    line-height: 1.4;
}

/* Lipid Calc Cards */
.white-sidebar-card {
    background: #FFFFFF;
}

.calc-box {
    background-color: #FFF8F6;
    border: 1px solid #F1F5F9;
}

.calc-box-highlight {
    background-color: #FEF3C7;
    border: 1px solid #FDE68A;
}

.calc-label {
    font-size: 11px;
    color: var(--text-slate-500);
    margin-bottom: 2px;
    font-weight: 500;
}

.calc-val {
    font-size: 14px;
    font-weight: 700;
}

.calc-sub {
    font-size: 10px;
    color: var(--text-slate-400);
}

/* Teal ESC Card */
.teal-sidebar-card {
   background:linear-gradient(180deg,#F06B56 0%,#D64A38 100%);
}
.nested-teal-box{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
    .header-card .card-body {
        flex-direction: column;
        align-items: flex-start !important;
    }
}
/* Custom Navigation Tabs */
.custom-nav-tabs .nav-link {
    color: var(--text-slate-600);
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    transition: all 0.15s ease-in-out;
}

.custom-nav-tabs .nav-link:hover {
    color: var(--primary-teal);
    background-color: var(--primary-teal-light);
    border-color: var(--border-color);
}

.custom-nav-tabs .nav-link.active {
    color: #FFFFFF !important;
    background-color: var(--primary-teal) !important;
    border-color: var(--primary-teal) !important;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

/* Registry Table Adjustments */
#squhRegistryTable th {
    background-color: #FAF5F3;
    color: var(--text-slate-600);
    font-size: 11px;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--border-color);
}

#squhRegistryTable td {
    border-color: var(--border-color);
    padding: 12px 8px;
}

#squhRegistryTable tr:hover {
    background-color: #FFFBFB;
}

/* Badge Tweaks */
.bg-amber {
    background-color: #FEF3C7 !important;
    color: #B45309 !important;
}

.patient-navbar {
    background: #fff;
    padding: 5px 0;
    border-bottom: 1px solid #ececec;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    position: fixed;
    width: 100%;
    z-index: 99;
}
.patient-navbar .nav-link {
    border: 0;
    font-family: inherit;
    font-size: 15px;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
        color: #404040;
}
.patient-navbar .navbar-brand{
    padding:0;
    margin-right:40px;
}

.patient-navbar .navbar-brand img{
    width:140px;
    height:auto;
    display:block;
}

.patient-navbar .navbar-collapse{
    justify-content:flex-end;
}

.patient-navbar .navbar-nav{
    display:flex;
    align-items:center;
    margin-left:auto;
}

.patient-navbar .navbar-nav li{
    list-style:none;
    margin-left:5px;
}

.patient-navbar .navbar-nav li:first-child{
    margin-left:0;
}

.patient-navbar .navbar-nav li a:hover,
.patient-navbar .navbar-nav li.current-menu-item>a{
    color:#ea6045;
}

.patient-navbar .navbar-toggler {
    border: none;
    background: #808080;
    padding: 3px 5px;
    border-radius: 5px !important;
}

.patient-navbar .navbar-toggler:focus{
    box-shadow:none;
}

.patient-navbar .navbar-toggler-icon{
    filter:brightness(0) invert(1);
}

@media(max-width:991px){

    .patient-navbar{
        padding:10px 0;
    }

    .patient-navbar .navbar-brand img{
        width:95px;
    }

    .patient-navbar .navbar-collapse{
        margin-top:18px;
        border-top:1px solid #eee;
    }

    .patient-navbar .navbar-nav{
        display:block;
        width:100%;
    }

    .patient-navbar .navbar-nav li{
        margin:0;
        border-bottom:1px solid #eee;
    }

    .patient-navbar .navbar-nav li a{
        display:block;
        padding:16px 0;
        font-size:18px;
    }
}

/* Footer CSS Start*/
 .site-footer {
      background-color: #ffd200;
      width: 100%;
    }
    .footer-wrapper {
      display: flex;
      min-height: 200px;
    }

    .footer-contact-side {
      flex: 1 1 auto;
      background-color: #ffd200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 15px;
    }
    .contact-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .contact-icon-wrapper {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .icon-location {
      color: #f26553;
      font-size: 26px;
    }
    .icon-email {
      color: #10ceb2;
      font-size: 26px;
    }
    .icon-phone-badge {
      background-color: #21beea;
      color: #ffffff;
      width: 30px;
      height: 30px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
    }
    .contact-text {
      color: #222222;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      margin: 0;
    }
    .contact-text a {
      color: #222222;
      text-decoration: none;
      font-weight: 600;
    }
    .footer-white-box {
      width: 240px;
      flex: 0 0 240px;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px 10px;
    }
    .social-links {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }
    .social-links a {
      color: #7c7c7c;
      font-size: 18px;
      text-decoration: none;
      transition: color 0.15s ease;
      display: inline-flex;
      align-items: center;
    }
    .social-links a:hover {
      color: #333333;
    }
    .icon-g-serif {
      font-size: 16px;
      font-weight: bold;
      font-style: italic;
      line-height: 1;
      color: #7c7c7c;
    }

    .social-links a:hover .icon-g-serif {
      color: #333333;
    }

    .credits-text {
      color: #888888;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.35;
      text-align: center;
    }

    .credits-text a {
      color: #4f7ee8;
      font-weight: 600;
      text-decoration: none;
    }

    .credits-text a:hover {
      text-decoration: underline;
    }

    .footer-right-extension {
      width: 18%;
      flex: 0 0 18%;
      background-color: #ffd200;
    }

    @media (max-width: 991px) {
      .footer-wrapper {
        flex-direction: column;
      }
      .footer-white-box,
      .footer-right-extension {
        width: 100%;
        flex: 1 1 100%;
      }
      .footer-right-extension {
        display: none;
      }
    }