/* ==========================================================
   ClueCRM UI
   COMPONENT LIBRARY
   Version : 1.0
==========================================================*/

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

.iv-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:none;
    outline:none;
    cursor:pointer;

    font-family:var(--iv-font-body);
    font-size:15px;
    font-weight:600;

    padding:14px 24px;

    border-radius:var(--iv-radius-md);

    transition:all .25s ease;

    text-decoration:none;

    user-select:none;
}

.iv-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.iv-btn-primary{

    color:white;

    background:linear-gradient(
        180deg,
        #132C68 0%,
        #0D1E4D 45%,
        #07132B 100%
    );

    box-shadow:var(--iv-shadow-md);
}

.iv-btn-primary:hover{

    transform:none;

    box-shadow:var(--iv-shadow-lg);
}

.iv-btn-primary:active{

    transform:none;
}

.iv-btn-secondary{

    background:white;

    border:1px solid var(--iv-border);

    color:var(--iv-text);
}

.iv-btn-secondary:hover{

    background:var(--iv-surface-alt);
}

.iv-btn-outline{

    background:transparent;

    border:1px solid var(--iv-primary);

    color:var(--iv-primary);
}

.iv-btn-outline:hover{

    background:var(--iv-primary);

    color:white;
}

.iv-btn-block{

    width:100%;
}

/* All action buttons use the same subtle Primary-button shrink on hover. */
button:not(.crm-nav-link):hover,
a.iv-btn:hover,
a.btn-register:hover,
.bfc-btn:hover {
    transform: scale(.97) !important;
    scale: 1 !important;
}

button:not(.crm-nav-link):active,
a.iv-btn:active,
a.btn-register:active,
.bfc-btn:active {
    transform: scale(.97) !important;
    scale: 1 !important;
}

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

.iv-label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:var(--iv-text-secondary);
}

.iv-input{

    width:100%;

    height:54px;

    padding:0 18px;

    border-radius:16px;

    border:1px solid var(--iv-border);

    background:white;

    color:var(--iv-text);

    font-size:15px;

    transition:.25s;
}

.iv-input::placeholder{

    color:var(--iv-text-light);
}

.iv-input:focus{

    outline:none;

    border-color:var(--iv-primary);

    box-shadow:
        0 0 0 4px rgba(30,58,138,.12);
}

.iv-input-group{

    margin-bottom:22px;
}

/*=========================================================
  CARD
=========================================================*/

.iv-card{

    background:white;

    border:1px solid var(--iv-border);

    border-radius:24px;

    box-shadow:var(--iv-shadow-md);

    padding:30px;

    transition:.25s;
}

.iv-card:hover{

    box-shadow:var(--iv-shadow-lg);
}

/*=========================================================
  BADGE
=========================================================*/

.iv-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;
}

.iv-badge-success{

    background:#DCFCE7;

    color:#15803D;
}

.iv-badge-warning{

    background:#FEF3C7;

    color:#B45309;
}

.iv-badge-danger{

    background:#FEE2E2;

    color:#B91C1C;
}

.iv-badge-info{

    background:#E0F2FE;

    color:#0369A1;
}

/*=========================================================
  AVATAR
=========================================================*/

.iv-avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    color:white;

    background:linear-gradient(
        135deg,
        var(--iv-primary),
        var(--iv-accent)
    );
}

/*=========================================================
  DIVIDER
=========================================================*/

.iv-divider{

    width:100%;

    height:1px;

    background:var(--iv-border);

    margin:24px 0;
}

/*=========================================================
  CHECKBOX
=========================================================*/

.iv-checkbox{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;
}

.iv-checkbox input{

    width:18px;

    height:18px;

    accent-color:var(--iv-primary);
}

/*=========================================================
  ALERT
=========================================================*/

.iv-alert{

    padding:16px 20px;

    border-radius:16px;

    font-size:14px;

    margin-bottom:20px;
}

.iv-alert-success{

    background:#DCFCE7;

    color:#166534;
}

.iv-alert-danger{

    background:#FEE2E2;

    color:#991B1B;
}

.iv-alert-warning{

    background:#FEF3C7;

    color:#92400E;
}

/*=========================================================
  LOADER
=========================================================*/

.iv-spinner{

    width:24px;

    height:24px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.25);

    border-top-color:white;

    animation:iv-spin .8s linear infinite;
}

@keyframes iv-spin{

    to{

        transform:rotate(360deg);

    }

}