/*
 * JOBBS UI Component Library
 * Enterprise-grade styling for JOBBS platform
 *
 * Contents:
 * 1. Typography & Font Overrides
 * 2. Badges
 * 3. Buttons
 * 4. (Future: Tables, Cards, Forms, etc.)
 */


/* ==========================================================================
   1. TYPOGRAPHY & FONT OVERRIDES
   ========================================================================== */

/* Font smoothing for crisp text rendering */
.k-grid,
.k-button,
.k-window,
.k-dialog,
.k-drawer,
.k-notification,
.jb-badge,
.jb-btn {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Apply Inter font to all Telerik components */
.k-widget,
.k-grid,
.k-grid-header,
.k-grid-content,
.k-grid-footer,
.k-grid-pager,
.k-button,
.k-input,
.k-textbox,
.k-textarea,
.k-numerictextbox,
.k-dropdown,
.k-dropdownlist,
.k-combobox,
.k-autocomplete,
.k-multiselect,
.k-datepicker,
.k-datetimepicker,
.k-timepicker,
.k-daterangepicker,
.k-calendar,
.k-scheduler,
.k-window,
.k-window-title,
.k-dialog,
.k-notification,
.k-toolbar,
.k-pager,
.k-pager-info,
.k-tabstrip,
.k-tabstrip-items,
.k-panelbar,
.k-menu,
.k-menu-item,
.k-treeview,
.k-listview,
.k-listbox,
.k-upload,
.k-progressbar,
.k-tooltip,
.k-popup,
.k-animation-container,
.k-chip,
.k-badge,
.k-card,
.k-drawer,
.k-drawer-content,
.k-searchbox,
.k-form,
.k-form-field,
.k-label,
.k-checkbox-label,
.k-radio-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ==========================================================================
   2. BADGES
   ========================================================================== */

/* Base badge style */
.jb-badge {
    display: inline-block;
    min-width: 65px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Size variants */
.jb-badge-wide {
    min-width: 95px;
}

.jb-badge-sm {
    min-width: auto;
    padding: 2px 6px;
    font-size: 10px;
}

/* Color variants - Muted enterprise colors */
.jb-badge-slate     { background-color: #4a5568; }
.jb-badge-indigo    { background-color: #5a67d8; }
.jb-badge-gray      { background-color: #718096; }
.jb-badge-amber     { background-color: #b7791f; }
.jb-badge-green     { background-color: #38a169; }
.jb-badge-yellow    { background-color: #d69e2e; }
.jb-badge-red       { background-color: #c53030; }
.jb-badge-blue      { background-color: #3182ce; }

/* Light variants (light background, dark text) */
.jb-badge-light {
    background-color: #e2e8f0;
    color: #4a5568;
}

.jb-badge-light-green {
    background-color: #c6f6d5;
    color: #276749;
}

.jb-badge-light-red {
    background-color: #fed7d7;
    color: #c53030;
}

.jb-badge-light-amber {
    background-color: #fefcbf;
    color: #975a16;
}

.jb-badge-light-blue {
    background-color: #bee3f8;
    color: #2c5282;
}


/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

/* Custom button base */
.jb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.jb-btn:hover {
    opacity: 0.85;
}

/* Button color variants */
.jb-btn-green   { background-color: #38a169; }
.jb-btn-red     { background-color: #c53030; }
.jb-btn-slate   { background-color: #4a5568; }
.jb-btn-indigo  { background-color: #5a67d8; }
.jb-btn-blue    { background-color: #3182ce; }

/* Telerik button overrides */
.k-button.jb-btn-override {
    border-radius: 3px !important;
}


/* ==========================================================================
   4. UTILITY CLASSES
   ========================================================================== */

/* Text utilities */
.jb-text-muted  { color: #718096; }
.jb-text-small  { font-size: 11px; }
.jb-nowrap      { white-space: nowrap; }

/* Spacing */
.jb-mt-1 { margin-top: 4px; }
.jb-mt-2 { margin-top: 8px; }
.jb-mb-1 { margin-bottom: 4px; }
.jb-mb-2 { margin-bottom: 8px; }


/* ==========================================================================
   5. GRID / TABLE ENHANCEMENTS
   ========================================================================== */

/* Prevent text wrapping in grid cells */
.k-grid td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   6. TYPOGRAPHY - iOS Inspired Color Palette
   ========================================================================== */

/* Text colors */
.jb-text-primary   { color: #1d1d1f; }
.jb-text-secondary { color: #86868b; }
.jb-text-tertiary  { color: #636366; }
.jb-text-link      { color: #0071e3; }

/* Font weights */
.jb-fw-regular  { font-weight: 400; }
.jb-fw-medium   { font-weight: 500; }
.jb-fw-semibold { font-weight: 600; }
.jb-fw-bold     { font-weight: 700; }

/* Font sizes */
.jb-fs-xs  { font-size: 11px; }
.jb-fs-sm  { font-size: 12px; }
.jb-fs-md  { font-size: 13px; }
.jb-fs-base { font-size: 14px; }
.jb-fs-lg  { font-size: 15px; }
.jb-fs-xl  { font-size: 17px; }

/* Monospace for IDs, codes, etc */
.jb-mono { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; }


/* ==========================================================================
   7. DETAIL CARDS & INFO DISPLAY
   ========================================================================== */

/* Label above value pattern */
.jb-label {
    display: block;
    color: #86868b;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

.jb-value {
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 600;
}

.jb-value-sm {
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
}

.jb-subtext {
    display: block;
    color: #86868b;
    font-size: 12px;
    margin-top: 2px;
}

/* Icon circle (for user avatars, etc) */
.jb-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #e8e8ed;
    border-radius: 10px;
    color: #636366;
}

.jb-icon-circle-sm {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

/* Key-value row (for detail lists) */
.jb-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.jb-kv-row:not(:last-child) {
    border-bottom: 1px solid #e5e5e7;
}

.jb-kv-key {
    color: #636366;
    font-size: 13px;
}

.jb-kv-value {
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    text-align: end;
    max-width: 60%;
    word-break: break-all;
}

/* Section title (for drawer headers) */
.jb-section-title {
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.jb-section-subtitle {
    color: #86868b;
    font-size: 13px;
}