/* ==========================================================================
   TimeFlow Shared UI Components Foundation (Semantic Theme)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Button System
   -------------------------------------------------------------------------- */
.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--tf-font-family);
    font-weight: var(--tf-weight-medium);
    border-radius: var(--tf-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background var(--tf-transition-fast), border-color var(--tf-transition-fast), color var(--tf-transition-fast);
    line-height: 1.2;
}
.tf-btn:active { transform: scale(0.99); }
.tf-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.tf-btn-sm { height: 30px; padding: 0 10px; font-size: var(--tf-text-xs); border-radius: var(--tf-radius-sm); }
.tf-btn-md { height: 34px; padding: 0 14px; font-size: var(--tf-text-base); }
.tf-btn-lg { height: 38px; padding: 0 18px; font-size: var(--tf-text-base); }

/* 主題連動變體 */
.tf-btn-primary {
    background: var(--tf-color-primary);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: var(--tf-shadow-sm);
}
.tf-btn-primary:hover {
    background: var(--tf-color-primary-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

.tf-btn-secondary {
    background: var(--tf-surface-overlay);
    color: var(--tf-text-secondary);
    border-color: var(--tf-border-default);
}
.tf-btn-secondary:hover {
    background: var(--tf-surface-elevated);
    color: var(--tf-text-primary);
    border-color: var(--tf-border-strong);
}

.tf-btn-ghost {
    background: transparent;
    color: var(--tf-text-muted);
}
.tf-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--tf-text-primary);
}

.tf-btn-danger {
    background: var(--tf-status-danger-bg);
    color: var(--tf-status-danger-light);
    border-color: var(--tf-status-danger-border);
}
.tf-btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

.tf-btn-success {
    background: var(--tf-status-success-bg);
    color: var(--tf-status-success-light);
    border-color: var(--tf-status-success-border);
}
.tf-btn-success:hover { background: rgba(16, 185, 129, 0.2); }

.tf-btn-warning {
    background: var(--tf-status-warning-bg);
    color: var(--tf-status-warning-light);
    border-color: var(--tf-status-warning-border);
}
.tf-btn-warning:hover { background: rgba(245, 158, 11, 0.2); }

/* --------------------------------------------------------------------------
   2. Badge & Tag System
   -------------------------------------------------------------------------- */
.tf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tf-text-xs);
    font-weight: var(--tf-weight-medium);
    padding: 2px 6px;
    border-radius: var(--tf-radius-sm);
    line-height: 1.3;
    white-space: nowrap;
}

.tf-badge-accent {
    background: var(--tf-color-primary-subtle);
    color: var(--tf-color-primary-light);
    border: 1px solid var(--tf-color-primary-border);
}
.tf-badge-success {
    background: var(--tf-status-success-bg);
    color: var(--tf-status-success-light);
    border: 1px solid var(--tf-status-success-border);
}
.tf-badge-warning {
    background: var(--tf-status-warning-bg);
    color: var(--tf-status-warning-light);
    border: 1px solid var(--tf-status-warning-border);
}
.tf-badge-danger {
    background: var(--tf-status-danger-bg);
    color: var(--tf-status-danger-light);
    border: 1px solid var(--tf-status-danger-border);
}
.tf-badge-neutral {
    background: rgba(255, 255, 255, 0.04);
    color: var(--tf-text-secondary);
    border: 1px solid var(--tf-border-default);
}

/* --------------------------------------------------------------------------
   3. Form Elements
   -------------------------------------------------------------------------- */
.tf-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tf-label {
    font-size: var(--tf-text-sm);
    font-weight: var(--tf-weight-medium);
    color: var(--tf-text-secondary);
}

.tf-input,
.tf-select,
.tf-textarea {
    width: 100%;
    font-family: var(--tf-font-family);
    font-size: var(--tf-text-base);
    color: var(--tf-text-primary);
    background: var(--tf-surface-overlay);
    border: 1px solid var(--tf-border-default);
    border-radius: var(--tf-radius-md);
    padding: 6px 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--tf-transition-fast);
}

.tf-input:focus,
.tf-select:focus,
.tf-textarea:focus {
    border-color: var(--tf-color-focus);
}

/* --------------------------------------------------------------------------
   4. Empty State & SVG Icon
   -------------------------------------------------------------------------- */
.tf-empty-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    gap: 8px;
}
.tf-empty-icon-wrap { color: var(--tf-text-disabled); margin-bottom: 4px; }
.tf-empty-title { font-size: var(--tf-text-base); font-weight: var(--tf-weight-semibold); color: var(--tf-text-secondary); }
.tf-empty-desc { font-size: var(--tf-text-sm); color: var(--tf-text-muted); max-width: 320px; }

.tf-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
}
.tf-svg-icon svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Searchable Department Combobox
   -------------------------------------------------------------------------- */
.tf-combobox-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tf-combobox-input {
    width: 140px;
    background: var(--tf-surface-sunken);
    border: 1px solid var(--tf-border-default);
    border-radius: var(--tf-radius-sm);
    padding: 2px 22px 2px 6px;
    font-size: var(--tf-text-xs);
    font-weight: var(--tf-weight-medium);
    color: var(--tf-text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--tf-transition-fast);
}
.tf-combobox-input:focus {
    border-color: var(--tf-color-focus);
}

.tf-combobox-arrow {
    position: absolute;
    right: 6px;
    font-size: 0.65rem;
    color: var(--tf-text-muted);
    cursor: pointer;
    transition: transform var(--tf-transition-fast);
    user-select: none;
}
.tf-combobox-wrap.open .tf-combobox-arrow {
    transform: rotate(180deg);
}

.tf-combobox-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--tf-surface-base);
    border: 1px solid var(--tf-border-strong);
    border-radius: var(--tf-radius-md);
    box-shadow: var(--tf-shadow-modal);
    z-index: 9999;
    padding: 4px;
    box-sizing: border-box;
    text-align: left;
}
.tf-combobox-wrap.open .tf-combobox-dropdown {
    display: block;
}

.tf-combobox-group-title {
    font-size: 0.68rem;
    font-weight: var(--tf-weight-bold);
    color: var(--tf-color-primary-light);
    padding: 4px 6px 2px 6px;
    border-bottom: 1px dashed var(--tf-border-subtle);
    margin-top: 4px;
}
.tf-combobox-group-title:first-child {
    margin-top: 0;
}

.tf-combobox-item {
    padding: 5px 8px;
    font-size: var(--tf-text-xs);
    color: var(--tf-text-secondary);
    border-radius: var(--tf-radius-sm);
    cursor: pointer;
    transition: background var(--tf-transition-fast), color var(--tf-transition-fast);
}
.tf-combobox-item:hover {
    background: var(--tf-surface-overlay);
    color: var(--tf-text-primary);
}
.tf-combobox-item.custom-opt {
    color: var(--tf-status-warning-light);
    font-weight: var(--tf-weight-semibold);
    border-top: 1px solid var(--tf-border-subtle);
    margin-top: 4px;
}