/* ============================================================
   UI Design System — Utilities
   Helper classes for rapid composition
   v1.0 | lib.myoasishealth.ca/v1/css/ui-utilities.css
   ============================================================ */

/* --------------------------------------------------------
   Surfaces & backgrounds
   -------------------------------------------------------- */
.ui-bg-1      { background: var(--ui-surface-1); }
.ui-bg-2      { background: var(--ui-surface-2); }
.ui-bg-3      { background: var(--ui-surface-3); }
.ui-bg-primary   { background: var(--ui-primary); color: #fff; }
.ui-bg-success   { background: var(--ui-success-light); }
.ui-bg-warning   { background: var(--ui-warning-light); }
.ui-bg-danger    { background: var(--ui-danger-light); }

/* --------------------------------------------------------
   Borders
   -------------------------------------------------------- */
.ui-border        { border: 1px solid var(--ui-border); }
.ui-border-top    { border-top: 1px solid var(--ui-border); }
.ui-border-bottom { border-bottom: 1px solid var(--ui-border); }
.ui-border-none   { border: none !important; }

/* --------------------------------------------------------
   Border radius
   -------------------------------------------------------- */
.ui-rounded-sm   { border-radius: var(--ui-radius-sm); }
.ui-rounded-md   { border-radius: var(--ui-radius-md); }
.ui-rounded-lg   { border-radius: var(--ui-radius-lg); }
.ui-rounded-pill { border-radius: var(--ui-radius-pill); }
.ui-rounded-full { border-radius: 50%; }
.ui-rounded-none { border-radius: 0; }

/* --------------------------------------------------------
   Shadows
   -------------------------------------------------------- */
.ui-shadow-none { box-shadow: none; }
.ui-shadow-sm   { box-shadow: var(--ui-shadow-sm); }
.ui-shadow-md   { box-shadow: var(--ui-shadow-md); }
.ui-shadow-lg   { box-shadow: var(--ui-shadow-lg); }

/* --------------------------------------------------------
   Typography
   -------------------------------------------------------- */
.ui-text-xs      { font-size: var(--ui-text-xs) !important; }
.ui-text-sm      { font-size: var(--ui-text-sm) !important; }
.ui-text-base    { font-size: var(--ui-text-base) !important; }
.ui-text-lg      { font-size: var(--ui-text-lg) !important; }

.ui-fw-normal    { font-weight: 400 !important; }
.ui-fw-medium    { font-weight: 500 !important; }
.ui-fw-semibold  { font-weight: 600 !important; }
.ui-fw-bold      { font-weight: 700 !important; }

.ui-text-muted   { color: var(--ui-text-muted) !important; }
.ui-text-primary { color: var(--ui-primary) !important; }
.ui-text-success { color: var(--ui-success) !important; }
.ui-text-warning { color: var(--ui-warning) !important; }
.ui-text-danger  { color: var(--ui-danger) !important; }
.ui-text-info    { color: var(--ui-info) !important; }

.ui-text-left    { text-align: left; }
.ui-text-center  { text-align: center; }
.ui-text-right   { text-align: right; }

.ui-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-text-nowrap  { white-space: nowrap; }
.ui-text-upper   { text-transform: uppercase; }
.ui-text-mono    { font-family: monospace; }

.ui-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------
   Display
   -------------------------------------------------------- */
.ui-d-none        { display: none !important; }
.ui-d-block       { display: block; }
.ui-d-inline      { display: inline; }
.ui-d-inline-flex { display: inline-flex; }
.ui-d-flex        { display: flex; }
.ui-d-grid        { display: grid; }

/* --------------------------------------------------------
   Flexbox
   -------------------------------------------------------- */
.ui-flex-row     { flex-direction: row; }
.ui-flex-col     { flex-direction: column; }
.ui-flex-wrap    { flex-wrap: wrap; }
.ui-flex-nowrap  { flex-wrap: nowrap; }
.ui-flex-1       { flex: 1; }
.ui-flex-auto    { flex: 1 1 auto; }
.ui-flex-none    { flex: none; }
.ui-flex-shrink-0 { flex-shrink: 0; }

.ui-align-start   { align-items: flex-start; }
.ui-align-center  { align-items: center; }
.ui-align-end     { align-items: flex-end; }
.ui-align-stretch { align-items: stretch; }

.ui-justify-start   { justify-content: flex-start; }
.ui-justify-center  { justify-content: center; }
.ui-justify-end     { justify-content: flex-end; }
.ui-justify-between { justify-content: space-between; }

.ui-gap-xs  { gap: var(--ui-spacing-xs); }
.ui-gap-sm  { gap: var(--ui-spacing-sm); }
.ui-gap-md  { gap: var(--ui-spacing-md); }
.ui-gap-lg  { gap: var(--ui-spacing-lg); }
.ui-gap-xl  { gap: var(--ui-spacing-xl); }

/* --------------------------------------------------------
   Spacing (padding / margin)
   -------------------------------------------------------- */
.ui-p-0   { padding: 0; }
.ui-p-xs  { padding: var(--ui-spacing-xs); }
.ui-p-sm  { padding: var(--ui-spacing-sm); }
.ui-p-md  { padding: var(--ui-spacing-md); }
.ui-p-lg  { padding: var(--ui-spacing-lg); }
.ui-p-xl  { padding: var(--ui-spacing-xl); }

.ui-px-sm { padding-left: var(--ui-spacing-sm);  padding-right: var(--ui-spacing-sm); }
.ui-px-md { padding-left: var(--ui-spacing-md);  padding-right: var(--ui-spacing-md); }
.ui-px-lg { padding-left: var(--ui-spacing-lg);  padding-right: var(--ui-spacing-lg); }

.ui-py-sm { padding-top: var(--ui-spacing-sm);   padding-bottom: var(--ui-spacing-sm); }
.ui-py-md { padding-top: var(--ui-spacing-md);   padding-bottom: var(--ui-spacing-md); }
.ui-py-lg { padding-top: var(--ui-spacing-lg);   padding-bottom: var(--ui-spacing-lg); }

.ui-m-0   { margin: 0; }
.ui-mb-0  { margin-bottom: 0; }
.ui-mb-xs { margin-bottom: var(--ui-spacing-xs); }
.ui-mb-sm { margin-bottom: var(--ui-spacing-sm); }
.ui-mb-md { margin-bottom: var(--ui-spacing-md); }
.ui-mb-lg { margin-bottom: var(--ui-spacing-lg); }
.ui-mb-xl { margin-bottom: var(--ui-spacing-xl); }

.ui-mt-xs { margin-top: var(--ui-spacing-xs); }
.ui-mt-sm { margin-top: var(--ui-spacing-sm); }
.ui-mt-md { margin-top: var(--ui-spacing-md); }
.ui-mt-lg { margin-top: var(--ui-spacing-lg); }
.ui-mt-auto { margin-top: auto; }
.ui-ml-auto { margin-left: auto; }
.ui-mr-auto { margin-right: auto; }
.ui-mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------
   Width / height
   -------------------------------------------------------- */
.ui-w-full   { width: 100%; }
.ui-w-auto   { width: auto; }
.ui-w-fit    { width: fit-content; }
.ui-h-full   { height: 100%; }
.ui-min-w-0  { min-width: 0; }

/* --------------------------------------------------------
   Overflow
   -------------------------------------------------------- */
.ui-overflow-hidden { overflow: hidden; }
.ui-overflow-auto   { overflow: auto; }
.ui-overflow-x-auto { overflow-x: auto; }

/* --------------------------------------------------------
   Position
   -------------------------------------------------------- */
.ui-relative { position: relative; }
.ui-absolute { position: absolute; }
.ui-sticky   { position: sticky; }

/* --------------------------------------------------------
   Cursor
   -------------------------------------------------------- */
.ui-cursor-pointer  { cursor: pointer; }
.ui-cursor-default  { cursor: default; }
.ui-cursor-not-allowed { cursor: not-allowed; }

/* --------------------------------------------------------
   Opacity
   -------------------------------------------------------- */
.ui-opacity-50 { opacity: 0.5; }
.ui-opacity-75 { opacity: 0.75; }

/* --------------------------------------------------------
   Divider
   -------------------------------------------------------- */
.ui-divider {
    height: 1px;
    background: var(--ui-border);
    margin: var(--ui-spacing-md) 0;
    border: none;
}

.ui-divider--sm { margin: var(--ui-spacing-sm) 0; }
.ui-divider--lg { margin: var(--ui-spacing-lg) 0; }

/* Vertical divider */
.ui-divider--vertical {
    width: 1px;
    height: auto;
    align-self: stretch;
    margin: 0 var(--ui-spacing-sm);
    background: var(--ui-border);
}

/* --------------------------------------------------------
   Theme toggle utility (button for light/dark switch)
   -------------------------------------------------------- */
.ui-theme-toggle {
    background: none;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    cursor: pointer;
    padding: 0.3rem var(--ui-spacing-sm);
    color: var(--ui-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--ui-spacing-xs);
    font-size: var(--ui-text-xs);
    font-family: var(--ui-font-family);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ui-theme-toggle:hover {
    background: var(--ui-surface-3);
    color: var(--ui-body-text);
}

/* --------------------------------------------------------
   Responsive visibility
   -------------------------------------------------------- */
@media (max-width: 575.98px)  { .ui-hide-xs { display: none !important; } }
@media (max-width: 767.98px)  { .ui-hide-sm { display: none !important; } }
@media (max-width: 991.98px)  { .ui-hide-md { display: none !important; } }
@media (min-width: 576px)     { .ui-show-xs-only { display: none !important; } }
@media (min-width: 768px)     { .ui-show-sm-only { display: none !important; } }