/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

/* Kinetic brand color */
:root {
    --kinetic-primary-color: #116a99;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Poppins, Helvetica, "sans-serif" !important;
}
 
ul {
     margin: 0;
     padding: 0;
 }
 
 .ms-welcome__header {
    padding: 20px;
    padding-bottom: 30px;
    padding-top: 100px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
 }

 .ms-welcome__main {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    width: 100%;
    /* Remove padding as Bootstrap will handle this */
 }
 
 .ms-welcome__main > h2 {
     width: 100%;
     text-align: center;
 }
 
 .ms-welcome__features {
     list-style-type: none;
     margin-top: 20px;
 }
 
 .ms-welcome__features.ms-List .ms-ListItem {
     padding-bottom: 20px;
     display: -webkit-flex;
     display: flex;
 }
 
 .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
     margin-right: 10px;
 }
 
 .ms-welcome__action.ms-Button--hero {
     margin-top: 30px;
 }
 
.ms-Button.ms-Button--hero .ms-Button-label {
  color: #0078d7;
}

.ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label{
  color: #005a9e;
  cursor: pointer;
}

b {
    font-weight: bold;
}

/* Custom styles for Bootstrap integration */

/* Adjust container padding for Office Add-in context */
.container-fluid {
    padding: 15px;
}

/* Custom Office UI colors for Bootstrap components */
.btn-primary {
    background-color: var(--kinetic-primary-color);
    border-color: var(--kinetic-primary-color);
}

.btn-primary:hover, 
.btn-primary:active, 
.btn-primary:focus {
    background-color: #0c5276 !important;
    border-color: #0c5276 !important;
}

/* Office UI consistent form controls */
.form-control:focus {
    border-color: var(--kinetic-primary-color);
    box-shadow: 0 0 0 0.25rem rgba(17, 106, 153, 0.25);
}

/* Debug panel styles */
#debug {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

#debug-content {
    max-height: 200px;
    overflow-y: auto;
}

/* Kinetic brand color utility classes */
.bg-kinetic {
    background-color: var(--kinetic-primary-color) !important;
}

.text-kinetic {
    color: var(--kinetic-primary-color) !important;
}

.border-kinetic {
    border-color: var(--kinetic-primary-color) !important;
}

/* Add a header style that uses the Kinetic brand color */
.kinetic-header {
    background-color: var(--kinetic-primary-color);
    color: white;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* Custom styles for Outlook taskpane header */
/* This will help reinforce the color set in the manifest */
.ms-CommandBar {
    background-color: var(--kinetic-primary-color) !important;
}

/* This targets the Office ribbon when our add-in is active */
.ms-Button--commandBar.is-checked {
    background-color: var(--kinetic-primary-color) !important;
}
.company-bg-color{
    background-color: #ffa800 !important;
}

.custom-outline-company {
  border: 1px solid #ffa800 !important;
  color: #ffa800 !important;
  background-color: transparent;
}

.custom-outline-company:hover {
  background-color: #ffa800 !important;
  color: white !important;
}

.btn-primary-custom {
    background-color: #3699ff !important;
    color: white !important;
}

.btn-outline-primary-custom{
  border: 1px solid #3699ff !important;
  color: #3699ff !important;
  background-color: transparent;
}

.btn-outline-primary-custom:hover {
  background-color: #3699ff !important;
  color: white !important;
}

.cursor-pointer {
    cursor:pointer !important;
}

.hover-shadow:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4); /* soft dark shadow */
  transition: box-shadow 0.2s ease-in-out;
}

.container-header {
    background-color: #ffa800 !important;
    border-radius: 10px;
}

.is-invalid {
  border: 1px solid red;
  background-color: #ffe6e6;
}

.absolute-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(255, 255, 255, 0.7);
    padding-top: 2rem;
}

.spinner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}